自动补全输入框中的数据（jquery）

<input type= "text" id= "tt" style= "width:300px;" />

$( function (){

     $( "#tt" ).bigAutocomplete({data:[{title: "book" },

                                     {title: "blue" },

                                     {title: "fool" },

                                     {title: "bus" }]});

})




在文本输入框中输入字符，如果与["book","blue","fool","bus"] 里的数据模糊匹配，则自动补全下拉框显示匹配的数据。这里一次性把列表里所有的 数据通过data参数传入。








<input type= "text" id= "ff" style= "width:150px;" />

$( function (){

     $( "#ff" ).bigAutocomplete({width: "200px" ,

                                data:[{title: "book" },

                                      {title: "blue" },

                                      {title: "fool" },

                                      {title: "bus" }]});

})

在文本输入框中输入字符，如果与["book","blue","fool","bus"] 里的数据模糊匹配，则自动补全下拉框显示匹配的数据。这里一次性把列表里所有的 数据通过data参数传入。











<input type= "text" id= "qq" style= "width:320px;" />

$( function (){

     $( "#qq" ).bigAutocomplete({data:[{title: "book" ,result: "booooook" },

                                     {title: "blue" ,result: "bluuuuue" },

                                     {title: "fool" },

                                     {title: "bus" ,result:[1,2,3]}],

                              callback: function (data){

                                 alert(data);

                              }});  

})

 1、在文本输入框中输入字符，如果与["book","blue","fool","bus"] 里的数据模糊匹配，则自动补全下拉框显示匹配的数据。这里一次性把列表里所有的 数据通过data参数传入。

  2、回调函数返回选中行的数据（应用场景，选中行时文本框中是字符串，有时候需要对应记录的id或其他信息），比如选中book行，返回的是对象{title:"book",result:"booooook"}。










<input type= "text" id= "nn" style= "width:200px;" />

$( function (){

     var url_ = "ajax.php" ;

     $( "#nn" ).bigAutocomplete({url:url_});  

})

1、在文本输入框中输入字符，ajax从后台获取匹配数据，自动补全下拉框显示匹配的数据。

2、url可以带参数，比如http://localhost?id=1，则实际提交到后台的url为比如http://localhost?id=1&keyword=xx， keyword值为文本输入框键入的值，后台根据keyword过滤返回数据，数据的格式为json：{"data":[{"title":"ff","result":"gg"},{"title":"mm","result":"hh"}]},result属性可选。










<input type= "text" class= "batch-text" style= "width:200px;" />

<input type= "text" class= "batch-text" style= "width:200px;" />

$( function (){

     $( ".batch-text" ).bigAutocomplete({data:[{title: "book" },

                                     {title: "blue" },

                                     {title: "fool" },

                                     {title: "bus" }]});

})

1、批量给所有class为batch-text的文本框绑定相同的自动补全功能。