搜索不工作在jquery自动完成

Question

我正在使用JQuery自动完成。数据源是动态的。用字符搜索（例如：alex）时，它会返回所有数据。我的代码，

$('#autocomplete').autocomplete({ 
 
    position: { 
 
    my: "right top", 
 
    at: "right bottom" 
 
    }, 
 
    source: function(request, response) { 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: apiurl + "apiv2/getUsers", 
 
     data: { 
 
     cust_id: localStorage.getItem("cust_id"), 
 
     user_type: $("#to_role").val() 
 
     }, 
 
     success: function(data1) { 
 
     var parsedJson = $.parseJSON(data1); 
 
     response($.map(parsedJson.response.data, function(item) { 
 
      return { 
 
      label: item.name, 
 
      value: item.id 
 
      } 
 
     })); 
 
     } 
 
    }); 
 
    }, 
 
    select: function(event, ui) { 
 
    $('#searchval').val(ui.item.value); 
 
    $('#autocomplete').val(ui.item.label); 
 

 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
    focus: function(event, ui) { 
 
    $("#autocomplete").val(ui.item.label); 
 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
}); 
 
$('#autocomplete').on('autocompleteselect', function(e, ui) { 
 
    getUsersData(ui.item.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 

 
<input id="autocomplete" class="form-control" placeholder="Select User"> 
 
<input type="hidden" id="searchval" name="searchval" class="form-control">

我必须展示我所搜索的确切数据。如何解决这个问题？请帮帮我。

在此先感谢

Answer 1

如果您的API服务器没有过滤选项，那么你需要在本地实现它

if (!RegExp.escape) { 
 
    RegExp.escape = function(value) { 
 
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") 
 
    }; 
 
} 
 

 
//to mock the ajax response 
 
var parsedJson = { 
 
    response: { 
 
    data: [{ 
 
     id: 1, 
 
     name: 'Abc' 
 
    }, { 
 
     id: 2, 
 
     name: 'cde' 
 
    }, { 
 
     id: 3, 
 
     name: 'efg' 
 
    }, { 
 
     id: 4, 
 
     name: 'ghi' 
 
    }, { 
 
     id: 5, 
 
     name: 'jkl' 
 
    }, { 
 
     id: 6, 
 
     name: 'aFZ' 
 
    }] 
 
    } 
 
} 
 

 
$('#autocomplete').autocomplete({ 
 
    position: { 
 
    my: "right top", 
 
    at: "right bottom" 
 
    }, 
 
    source: function(request, response) { 
 

 
    //replace the contents of the ajax success handler to do local filter 
 
    var regex = new RegExp(RegExp.escape(request.term), "i"); 
 
    var recs = $.grep(parsedJson.response.data, function(obj) { 
 
     return regex.test(obj.name) 
 
    }); 
 
    response($.map(recs, function(item) { 
 
     return { 
 
     label: item.name, 
 
     value: item.id 
 
     } 
 
    })); 
 

 

 
    }, 
 
    select: function(event, ui) { 
 
    $('#searchval').val(ui.item.value); 
 
    $('#autocomplete').val(ui.item.label); 
 

 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
    focus: function(event, ui) { 
 
    $("#autocomplete").val(ui.item.label); 
 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
});

<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 
<input id="autocomplete" class="form-control" placeholder="Select User"> 
 
<input type="hidden" id="searchval" name="searchval" class="form-control">

注：这可能是一个昂贵的执行情况您正在获取每个事件的所有内容，您可以尝试在本地缓存本地响应的ajax响应以提高性能