Текстовое поле с динамически генерируемым каталогом с использованием jQuery

Question

Я пытаюсь сгенерировать динамику для ввода текста. Когда будет нажат текстовый ввод, jQuery найдет ранее введенные данные для текущего пользователя и добавит их к соответствующему каталогу данных. Вот разметка у меня прямо сейчас:

<div class="form-inline"> 
    <input type="text" list="suggestions" id="search-input"> 
    <datalist id="suggestions"> 
    </datalist> 
    <button type="submit" class="btn btn-default" id="search-submit"><span class="glyphicon glyphicon-search"></span></button> 
</div> 

А вот это JQuery:

$('#search-input').on('click', function(){ 
    for(var x = 0; x<localStorage.length; x++){ 
    var key = localStorage.key(x); 
    var item = localStorage.getItem(key); 
    console.log(username+'-'+key+'-'+item);//username is a global var that holds the name of the currently logged in user 
    if(key == username) { 
     $('#suggestions').append('<option value="'+item+'">'); 
    } 
    } 
}); 

Это ничего не делает до сих пор. Что здесь может быть не так?

Answer 1

Вам не придется искать через все в LocalStorage, если вы уже знаете, ключ:

$('#search-input').on('click', function(){ 
    if(localStorage.getItem(username)) { 
    $('#suggestions').append('<option value="'+localStorage.getItem(username)+'">'); 
    } 
    } 
}); 

, если это не работает, но console.log localStorage.getItem(username) делает то убедитесь, что селектор $('#suggestions') работает слишком ,

Answer 2

вы не должны использовать click при обращении к учебнику,

использовать вместо change, focus, keyup, keydown