[英]Jquery Autocomplete to show multiple values while calling by first two characters
I can find many sources to call an item and its value, but I am in trouble with showing multiple values with triggering by first two character. 我可以找到许多调用项及其值的资源,但是在显示前两个字符触发多个值时遇到麻烦。
I have a PHP array such as: 我有一个PHP数组,例如:
"XXXX", "YYYY", ...
And print it to javascript var as below: 并将其打印到javascript var,如下所示:
var tags = [ <?php foreach ($airports as $ap) echo $ap ;?> ];
And I want to revize this array now as: 我现在想将此数组修改为:
"XXXX" => "A", "YYYY" => "B", ...
And my current autocomplete script is (working perfectly): 我当前的自动完成脚本是(完美运行):
<script>
var tags = [ <?php foreach ($airports as $ap) echo $ap ;?> ];
$( ".meydan" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}).slice(0, 13) );
},
minLength:2
});
</script>
As you can understand, this script only autocompletes for XXXX, YYYY... 如您所知,此脚本仅自动完成XXXX,YYYY ...
However I would like to autocomplete still for XXXX, YYYY, however with showing (not autocompleting, only display) the other letter: 但是,我仍然想为XXXX,YYYY进行自动填充,但是显示(不自动填充,仅显示)另一个字母:
XXXX - <i>A</i>
YYYY - <i>B</i>
I am lost at this point. 此时我迷路了。 I appreciate your help in advance.
非常感谢您的帮助。
You should change your data source function for your needs and extend _renderItem function to get desired result 您应该根据需要更改数据源功能,并扩展_renderItem函数以获得所需的结果
In javascript key value arrays are objects. 在javascript中,键值数组是对象。 So you should change your
所以你应该改变你的
var tags = [ <?php foreach ($airports as $ap) echo $ap ;?> ];
to 至
var tags = <?php echo json_encode($airports); ?>;
and change source function as 并将源功能更改为
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
var matchingKeys = [];
var resultArray = [];
matchingKeys = $.grep( Object.keys(tags), function( item ){
return matcher.test( item );
}).slice(0, 13);
$.each(matchingKeys,function(index,value){
resultArray.push({
'label': tags[value],
'value': value
});
});
response(resultArray);
},
And change list items you can extend _renderItem function like this 并更改列表项,您可以像这样扩展_renderItem函数
create: function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $( "<li>" )
.attr( "data-value", item.value )
.append( item.label + ' - <i>' + item.value +'</i>' )
.appendTo( ul );
};
},
Here, the complete code: 在这里,完整的代码:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.