问题描述
实现的效果是 我们可以利用 上 下 键 可以选择 从数据库当中循环出来的数据 并且 搜索栏里面的 input 当中的值会 改变成当前 选择的元素的值 只要告诉我如何 利用 上 下 键可以选择元素就可以了 谢谢^_^ 问题补充：我想问下 就非得用插件才行了？我要的是一个很简单的应用 不用考虑到性能的问题的 不用插件能不能实现
解决方案
http://jqueryui.com/demos/autocomplete/#remote-jsonp下面有VIEW SOURCE<meta charset="utf-8"><style>.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }#city { width: 25em; }</style><script>$(function() {function log( message ) {$( "<div/>" ).text( message ).prependTo( "#log" );$( "#log" ).attr( "scrollTop", 0 );}$( "#city" ).autocomplete({source: function( request, response ) {$.ajax({url: "http://ws.geonames.org/searchJSON",dataType: "jsonp",data: {featureClass: "P",style: "full",maxRows: 12,name_startsWith: request.term},success: function( data ) {response( $.map( data.geonames, function( item ) {return {label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,value: item.name}}));}});},minLength: 2,select: function( event, ui ) {log( ui.item ?"Selected: " + ui.item.label :"Nothing selected, input was " + this.value);},open: function() {$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );},close: function() {$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );}});});</script><div class="demo"><div class="ui-widget"><label for="city">Your city: </label><input id="city" />Powered by <a href="http://geonames.org">geonames.org</a></div><div class="ui-widget" style="margin-top:2em; font-family:Arial">Result:<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div></div><!-- End demo --><div class="demo-description"><p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p><p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p></div><!-- End demo-description -->
解决方案二：
<script type="text/javascript">function google(){var pos=$("#ename").position();var url="dept!google";$.post(url,{ename:$("#ename").val()},function(msg){$('#emp').css("left",pos.left+20);$('#emp').css("top",pos.top+20);$('#emp').html(msg);$('#emp').show();});}function setval(obj){$('#ename').val(obj);$('#emp').hide();}
解决方案三：
[url]http://jqueryui.com/demos/autocomplete/#remote [/url]
解决方案四：
不用插件你自己实现比较 麻烦,又要自己写AJAX的东西,又要重新渲染DOM元素,一天都有可能做不完用插件 很快的当然也可以找网上别人没用插件自己纯手工JAVASCRIPT 写的自动完成 功能 帮你搜了下http://www.jz123.cn/text/0133852.htmlhttp://www.jb51.net/article/19017.htm自己手写就要看你JAVASCRIPT的基本工了
解决方案五：
输入框下面是个DIV,通过捕获鼠标上下键来选中,并且更新输入框里的值.自己实现也不会很复杂.
解决方案六：
后台走数据库模糊搜索的话，性能太差。建议使用lucene建立索引。关键字联想信息通过lucene查询。
解决方案七：
http://jqueryui.com/demos/autocomplete/#remote
解决方案八：
http://jqueryui.com/demos/autocomplete/
解决方案九：
jquery.ui.autocomplete.js去jquery的官网看一看,很简单的一个插件.