使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

原文: https://blog.csdn.net/qililong88/article/details/51941641

 

$("#language").autocomplete({
    // 静态的数据源
    source: [
        { label: "Chinese", value: 1, sayHi: "你好" },
        { label: "English", value: 2, sayHi: "Hello" },
        { label: "Spanish", value: 3, sayHi: "Hola" },
        { label: "Russian", value: 4, sayHi: "Привет" },
        { label: "French", value: 5, sayHi: "Bonjour" },
        { label: "Japanese", value: 6, sayHi: "こんにちは" },    
    ],
    select: function(event, ui){
        // 这里的this指向当前输入框的DOM元素
        // event参数是事件对象
        // ui对象只有一个item属性，对应数据源中被选中的对象
        $(this).value = ui.item.label;
        $("#lang_id").val( ui.item.value );
        $("#sayHi").html( ui.item.sayHi );
        
        // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
        event.preventDefault();     
    }
});

 

source: function(req, res) {
    var result = null
　　var data = {name: req['name']}
    $.ajax({
　　　　　data: data
        success: function(response) {
　　　　　　result = response
          return res(result)
　　　　　}
    })
}

focus: function () {
}