jquery.autocomplete联想补全插件及使用中遇到的问题

 一、jquery.autocomplete.js插件的使用

1、获取后台数据

$("#scenic_name").flushCache(); //刷新缓存(非常重要)
$('#scenic_name').autocomplete({
    minChars: 0,
     '12.5%',
    matchCase:false,//不区分大小写
    scroll: true,
    dataType: 'json',    
    scrollHeight: 400,
    delay:100,
    matchContains: true,//是否只要包含文本框里的就可以
    //此处为传递参数
    extraParams: { prov_id: function() { return $("#prov_id").find("option:selected").val(); }, city_id: function() { return $("#city_id").find("option:selected").val(); }},
    //需要把data转换成json数据格式                      
    parse: function(json) {
    return $.map(eval(json.data), function(row) {
      return {
        data: row,
        value: row.name,    //此处无需把全部列列出来,只是两个关键列
        result: row.scenic_id 
      }
    });
  },
    formatItem: function(data, i, total) {  // 格式化列表中的条目;row:条目对象,i:当前条目数,total:总条目数
    // 该条语句判断没有符合条件是数据时,将默认的undefined提示修改
    if(data[0]== "No Records."){
      return `<button data-  disabled>暂无相关景区</button>`; 
    }else{
      return `<p data->${data.name}</p>`; 
    }
    },
    formatMatch: function(data, i, total) {
    return data.name;
    },
    formatResult: function(data, value) {
    return data.name;   
    }
}).result(function(event, data, formatted) { //回调
    $("#scenic_name").val(data.name); 
    $("#scenic_id").val(data.scenic_id); 
    // 选中时进行表单验证
    $('#addTicketBaseForm').validate().element($("#scenic_name"))
  });             

 2、获取前台数据

var scenicArr= [{"scenic_id":"1001","name" : "北京长城"},{"scenic_id":"1002","name" : "故宫"}];
$('#scenic_name').autocomplete(scenicArr, {
  minChars: 0,
   '12.5%',
  matchCase:false,//不区分大小写
  scroll: true,
  dataType: 'json',    
  scrollHeight: 400,
  delay:100,
  matchContains: true,//是否只要包含文本框里的就可以
  formatItem: function(data, i, total) {  // 格式化列表中的条目;row:条目对象,i:当前条目数,total:总条目数
    if(data[0]== "No Records."){
      return `<button data-  disabled>暂无相关景区</button>`; 
    }else{
      return `<p data->${data.name}</p>`; 
    }
  },
  formatMatch: function(data, i, total) {
    return data.name;
  },
  formatResult: function(data, value) {
    return data.name;   
  }}
).result(function(event, data, formatted) { //回调
    $("#scenic_name").val(data.name); 
    $("#scenic_id").val(data.scenic_id); 
    // 选中时进行表单验证
    $('#addTicketBaseForm').validate().element($("#scenic_name"))
  });

插件的使用可参考以下这篇文章,里面也有很详细的参数说明:https://www.cnblogs.com/guo0/archive/2012/01/10/2318140.html

二、在使用该插件时遇到的问题:

1、第一次点击输入框不会出现下拉框,要点击两次或者按回退键才行。改成单击时触发的方法为:

将插件源码中的

if ( hasFocus++ > 1 && !select.visible() ) {
    onChange(0, true);
}
改为
if ( ++hasFocus > 1 && !select.visible() ) {
   onChange(0, true);
}
 
踩坑记录:
(1)minChars设置为0是默认双击触发插件
(2)给输入框添加 onclick="$(this).click();" 事件,结果进入死循环,网页崩了
 
2、