基于bootstrap的autocomplete自动…

基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php). 

插件下载地址：  点击此处下载插件

首先肯定还是加载bootstrap&jquery了. 需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可; 另外,返回的数据要先parseJSON!切记.

相关参数说明：
source：function(query,process){}query表示当前文本输入框中的字符串，可在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数
formatItem：function(item){}对返回数据的具体某个json对象转化为字符串格式，用以显示在提示列表中，返回值：字符串
setValue：function(item){}选中提示列表某项时，设置文本输入框中显示的值以及实际需要获取的值。返回值格式：{'data-value':item["输入框显示值的item属性"],'real-value':item["实际需要获取值的item属性"]},后期可通过文本输入框的real-value属性获取该值
items：自动完成提示的最大结果集数量，默认：8
minLength：当前文本输入框中字符串达到该属性值时才进行匹配处理，默认：1
delay：指定延时毫秒数后，才正真向后台请求数据，以防止输入过快导致频繁向后台请求，默认：500

js代码，如下：

$('#card_no').autocomplete({
   source:function(query,process){
       var matchCount =this.options.items;//允许返回结果集最大数量
      $.post("card/list",{"card_no":query,"matchCount":matchCount},function(respData){
           respData =$.parseJSON(respData);//解析返回的数据
          if(!respData) {
              alert('输入的卡号不正确');
           }
           returnprocess(respData);
       });
    },
   formatItem:function(item){
       returnitem["card_no"]+"(手机号:"+item["mobile"]+")";
    },
   setValue:function(item){
       return{'data-value':item["card_no"],'real-value':item["mobile"]};
    }
});

php代码

  下面是自己采用yii2写的后台，这里面说明下只要保证返回结果是下面的格式就行,你可以替换成你所用的框架

  [{"card_no":"123","mobile":"11"},{"card_no":"124","mobile":"22"}]

  Class CardController extend Controller {
      public function actionList()
      {
           // 获取ajax通过ajax传过来的card_no参数
           $query = Yii::$app->request->post('card_no');
           //这里CardList类对应的是数据库中card_list表，这里CardList类就不写出来 根据条件取出相关卡数据
           $result = CardList:find()->select("card_no,mobile")->where(['like','card_no',$query])
                                ->asArray()->all();
           //返回json数据
           echo json_encode($result);
           exit;
      }
  }

效果图如下