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-id="${data.scenic_id}"  disabled>暂无相关景区</button>`; 
　　　　}else{
　　　　　　return `<p data-id="${data.scenic_id}">${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-id="${data.scenic_id}"  disabled>暂无相关景区</button>`; 

　　　　}else{

　　　　　　return `<p data-id="${data.scenic_id}">${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、