您的位置:首页 > 博客中心 > 前端开发 >

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

时间:2022-04-11 14:42

原文: 

 

$("#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 () {
}

 

本类排行

今日推荐

热门手游