Авто-подсказки при вводе символа (ов) в поле ввода?

Question

Существует огромная база данных о городах и других вещах в системе (местоположениях), ожидающих выхода из системы в виде выпадающего списка, div (ов) или чего-то, что может сжать огромное количество вариантов - сразу после каждого символа желаемого местоположения вводится в это поле ввода.

Это похоже на добавление тегов здесь, когда мы отправляем вопросы. Поэтому, если мы войдем в «L», Лондон и Лацио будут перечислены после «Ла» - останется только Лацио.

Любые шаги или интересные примеры, как это сделать? Пытался найти что-то самодовольное, но не повезло. Я использую jquery.

Answer 1

Это может быть не лучшим гуманного, но это работает на моем сайте. Этот скрипт реализует автоматическое заполнение имени улицы, которое зависит от состояния и города, которые пользователь ввел ранее. Этот фрагмент кода прослушивает событие «keyup». Если пользователь ввел более одной буквы, скрипт запускает запрос ajax, в котором скрипт .php анализирует отправленные параметры, выполняет SQL-запрос и ответы. Если пользователю повезло, и он получает некоторое предложение по названию улицы, которое он пытается найти, мы показываем ему div с id = hintsTable. Мы также создаем прослушиватель событий (щелчок) для каждого параметра автозаполнения, в котором мы заменяем значение поля ввода для параметра автозаполнения и скрываем раскрывающийся список. Надеюсь, это поможет.

$("#street input").keyup(function(){             //street enter 
     var input = $('#street input').val(); //we get what user has already entered 
     var code = $('#mregionSelect').val(); //city id 
     if(input.length > 1) 
     { 
      $.ajax({ 
       type  : "POST", 
       url   : "components/com_areas/ajaxhelper.php", 
       data  : "input=" + encodeURIComponent(input) + "&code=" + code, 
       cache  : false, 
      }).done(function(msg){ 
       if(msg.length > 0) 
       { 
        $('#hintsTable').html(msg); //fill drop-down list with auto complete options 
        $('#hints').css('display', 'block'); //show the list 
        $('#hintsTable tr').click(function(){ 
         var hint = this.cells[0].innerHTML; 
         $('#street input').val(hint); 
         $('#hints').css("display", "none"); 
        }) 
       } 
       else 
       { 
        $('#hintsTable').html(''); 
        $('#hints').css('display', 'none'); 
        //$('#findButton').css('display', 'none'); 
       } 
      }) 
     } 
     else 
     { 
      $('#hintsTable').html(''); 
      $('#hints').css('display', 'none'); 
      //$('#findButton').css('display', 'none'); 
     }    
    }) 

Answer 2

Вы можете создать текстовое поле с DIV под

<input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/>  
<div class="autoDiv"></div> (could use CSS to format the div accordingly) 

теперь jscriptfunc, когда пользователь нажимает клавишу вниз может быть закодирована, чтобы вызвать PHP скрипт с помощью AJAX. Этот PHP-скрипт принимает все, что пользователь набрал до сих пор, и выполняет простой поиск соответствия шаблонов, например.

Select * from table where field like '$input%' limit 5; 

Тогда мы просто взять результат и кормить его в DIV