在输入字段中输入字符时自动建议？

问题描述：

系统（位置）中有一个庞大的城市和其他东西数据库，等待作为下拉列表，div（s）或什么东西来压缩大量的选择 - 在想要的位置的每个字符之后立即被输入到该输入字段中。在输入字段中输入字符时自动建议？

它与我们提交问题时的标签类似。因此，如果我们输入“L”伦敦和拉齐奥即将上市，在“La”之后 - 只有拉齐奥将保持可用状态。

任何步骤或很酷的例子如何做到这一点？试图找到一些很酷的东西，但没有运气。我使用jQuery。

我认为有几个jQuery自动完成插件。 – Pointy 2011-12-14 19:58:13

您可能想要[jQuery UI自动完成]（http://jqueryui.com/demos/autocomplete/）。 – 2012-01-27 18:09:42

答

这可能不是最好的sollution但它的作品在我的网站。此脚本实现街道名称自动完成，取决于用户之前输入的州和城市。这段代码监听事件“keyup”。如果用户输入了多个字母，脚本将启动一个js请求，其中.php脚本会分析我们发送的参数，并进行SQL查询和回复。如果用户足够幸运并且他尝试查找街道名称的一些建议，我们向他显示ID为hintsTable的div。我们还为每个自动完成选项创建事件侦听器（单击），其中我们用自动完成选项替换输入字段的值并隐藏下拉列表。我希望它有帮助。

$("#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'); 
     }    
    })

答

你可以在

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

现在jscriptfunc创建一个div一个文本框，当用户按下某个键可编码调用与AJAX的帮助PHP脚本。这个PHP脚本正在接受到目前为止输入的任何用户，并执行简单的模式匹配搜索，例如，

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

然后，我们只是把结果和它送入DIV

在输入字段中输入字符时自动建议？

相关推荐