PHP1234|PHP修炼之路|跟着明礼馨德一起修炼PHP

今天说一下jquery一款很好用的插件autocomplete的使用方法。

1.下载必需的文件：

点击下载：http://pan.baidu.com/s/1kVIzCGn

2.引入这两个文件，看下面源码：

<!--下面是使用本地数据，不远程获取数据-->
<script>
$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
</script>

<!--下面是使用远程获取数据-->
<script>
  $( function() {
    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
</script>

3.当远程获取数据时一定要注意后台返回的数据格式，返回格式如下所示：

{[id:'',label:'',value:''],[id:'',label:'',value:''],[id:'',label:'',value:'']}

如果是上述的格式，则在下拉框中显示的是label的值，选择后显示value的值，若选中后也想显示label的值，则返回的数据只保留label即可，此外ajax向后台请求的参数是term。

转载请注明出处：php1234.cn ,原文地址：http://php1234.cn/a/xiulianzhilu/2016/1102/114.html