[英]How to filter search input to show correct autocomplete in JQUERY?
[英]how to filter my search input jquery autocomplete?
我遇到一个问题,当用户搜索一个值时,它会显示所有值,而不是过滤我的值。 当我搜索html
,我希望它仅显示html
作为我的值,而不是我的所有值。 请帮忙。 谢谢。
这是我的代码:
$(function() { function log(message) { $("<div>").text(message).prependTo("#log"); $("#log").scrollTop(0); } $("#html").autocomplete({ source: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json", minLength: 1, select: function(event, ui) { log(ui.item ? "Selected: " + ui.item.value + " element " : "Nothing selected, input was " + this.value); } }); });
.ui-autocomplete-loading { background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script> <div class="ui-widget"> <label for="html">HTML Elements: </label> <input id="html"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>
看来源网址没有响应过滤器。 您可以先进行呼叫,然后将所有结果保存到变量中,然后设置自动完成功能
let dataVariable;
$.ajax({
method: "POST",
url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json",",
success:function(data){
dataVariable=data;
}
})
.done(function( msg ) {
$("#html").autocomplete({
source: data,
minLength: 1,
select: function(event, ui) {
log(ui.item ?
"Selected: " + ui.item.value + " element " :
"Nothing selected, input was " + this.value);
}
});
});
$(function() { function log(message) { $("<div>").text(message).prependTo("#log"); $("#log").scrollTop(0); } $.get("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json", function(data) { $("#html").autocomplete({ source: data, minLength: 1, select: function(event, ui) { log(ui.item ? "Selected: " + ui.item.value + " element " : "Nothing selected, input was " + this.value); } }); }) });
.ui-autocomplete-loading { background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <label for="html">HTML Elements: </label> <input id="html"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.