使用 JQuery 自动完成功能搜索标签和说明

Question

这是我当前的代码

    $( "#part_numbers<?php echo $i ?>" )
        // don't navigate away from the field on tab when selecting an item
        .on( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).autocomplete( "instance" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 1,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( "; " );
                return false;
            }

        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>")
              .append("<a>" + item.label + " - (" + item.desc + ") <img alt='no image' style='height: 50px;' src='./images/" + item.file + "' /></a>")
              .appendTo(ul);
        };

我也希望能够搜索描述，并且能够找到此示例

source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(schools, function(value) {
    return matcher.test(value.value)
        || matcher.test(value.nickname);
}));
}

我已经为此苦苦挣扎了一段时间，只是随机测试不同的东西，但无法搜索标签和描述。 有人可以帮助我吗？

Answer 1

根据我的评论，基本上您必须应用 2 个过滤器，捕获所有数据，然后将其发送回 1 个数组中的response()。

如果您的数据如下所示：

var availableTags = [{
  value: "", 
  label: "", 
  desc: "", 
  file: "", 
  vendor: "" 
},{ 
  value: "00-1156-02", 
  label: "00-1156-02", 
  desc: "", 
  file: "", 
  vendor: "" 
}];

您可以设置如下源：

source: function( request, response ) {
  // extract the last term
  var lastTerm = extractLast(request.term);
  var results = [];
  // loop over data, seeking labels & desc
  $.each(availableTags, function(k, v){
    if(v.label.indexOf(lastTerm) => 0){
      results.push(v);
    }
    if(v.desc.indexOf(lastTerm) => 0){
      results.push(v);
    }
  });
  response(results);
}

就个人而言，由于您已经在使用 PHP，因此我会将您的源代码设置为在 SQL 数据库中执行此查询的 PHP 页面。

希望有帮助。