时间戳

首页 > 解决方案 > Jquery Autocomplete 在前两个字符调用时显示多个值

javascript - Jquery Autocomplete 在前两个字符调用时显示多个值

问题描述

我可以找到很多来源来调用一个项目及其值，但是我无法通过前两个字符触发来显示多个值。

我有一个 PHP 数组，例如：

"XXXX", "YYYY", ...

并将其打印到javascript var，如下所示：

var tags = [ <?php foreach ($airports as $ap) echo $ap ;?> ];

我现在想将这个数组修改为：

"XXXX" => "A", "YYYY" => "B", ...

我当前的自动完成脚本是（完美运行）：

  <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>

如您所知，此脚本仅自动完成 XXXX、YYYY...

但是我仍然想为 XXXX、YYYY 自动完成，但是显示（不自动完成，只显示）另一个字母：

XXXX - <i>A</i>
YYYY - <i>B</i>

我在这一点上迷路了。我提前感谢您的帮助。

标签： javascriptjqueryautocomplete

解决方案

您应该根据需要更改数据源函数并扩展 _renderItem 函数以获得所需的结果

在 javascript 中，键值数组是对象。所以你应该改变你的

var tags = [ <?php foreach ($airports as $ap) echo $ap ;?> ];

至

var tags = <?php echo json_encode($airports); ?>;

并将源函数更改为

 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);
    },

并更改列表项，您可以像这样扩展_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 );
    };
},

在这里，完整的代码：

Jsfiddle 链接

推荐阅读