当输入 df 后,会向服务器发送 ajax 请求,返回数据时这样的 {"q":"gf","p":false,"s":["gfan","鬼父","gfw","功夫 2","广发银行","功夫","gf5","gfp","广发银行信用卡中心","gf6"]}; 百度会把这些数据填充到搜索框中 Jquery 官网的 autocomplete 插件的实现是这样的
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
当输入 a 的时候,会把字符串中包含 a 的字符串填充到输入框中,autocomplete 能不能像百度的实现一样,把从服务器端返回的数据全部填充到输入框中,或者有没有其他的插件支持,而不是再返回的数据中进行筛选
在 jqueryui 官网上找到一种方法,做一个对应关系,当我输入 j 的时候,从 label 中进行查找,而再下拉框中显示的的 value,但是还是感觉稍稍复杂了一点,如果可以直接填充 value 就好了,求高人指点~
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery"
},
{
value: "jquery-ui",
label: "jQuery UI"
},
{
value: "sizzlejs",
label: "Sizzle JS"
},
{
value: "阿贾克斯",
label: "ajax"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.value );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.value + "</a>" )
.appendTo( ul );
};
});
</script>