Question

我有一个搜索输入，其中显示了我的自动完成功能，但是由于某种原因，它没有过滤结果-任何人都可以告诉或向我展示一种过滤结果的方法，以便在下面的代码中显示正确的自动完成功能。 json格式和html代码已更新。谢谢您的帮助。

这是我的代码

function doClick(row, col)
        {
            var top = row -1;
            var bottom = row +1;
            var left = col -1;
            var right = col +1;
            var swapped = false;
            
            if ((top != -1) && (cells[top][col].innerHTML = ""))
                {
                    cells[top][col].innerHTML = cells[row][col].innerHTML;
                    cells[row][col].innerHTML = "";
                    swapped = true;
                    
                }
            else if ((right != 4) && (cells[row][right].innerHTML = ""))
                {
                    cells[row][right].innerHTML = cells[row][col].innerHTML ;
                    cells[row][col].innerHTML = "";
                    swapped = true;
                }
            else if ((bottom != 4) && (cells[bottom][col].innerHTML = ""))
                {
                    cells[bottom][col].innerHTML = cells[row][col].innerHTML;
                    cells[row][col].innerHTML = "";
                    swapped = true;
                }
            else if ((left != -1) && (cells[row][left].inn  = ""))
                {  
                    cells[row][lef].innerHTML = cells[row][col].innerHTML;
                    cells[row][col].innerHTML = "";
                    swapped = true;
                }
            else
                {   
                    alert("Illegal Move.");
                }

JobSearchItem返回JSON

       $( function() {
    var cache = {};
    $( "#searchTextField" ).autocomplete({
      minLength: 2,
      source: function( request, response ) {
        var term = request.term;
        if ( term in cache ) {
          response( cache[ term ] );
          return;
        }

        $.post( "http://localhost:8080/myApp/JobSearchItem.xhtml", request, 
        function( data, status, xhr ) {
          cache[ term ] = data;
          response( data );
        });
      }
    });
  } );

html

[
   {
    "id": "9000",
    "label": "PROGRAMMER TEST 1 (9000) ",
    "value": "90000"
},
 ]

Answer 1

当您像这样将远程URL指定为数据源时，预计远程服务器将根据自动完成功能为其指定的搜索词进行过滤，并返回已过滤的结果。

仅当您向其提供静态数据时，自动完成才执行过滤。有关更多详细信息，请参见http://api.jqueryui.com/autocomplete/#option-source。

如果您的远程服务器无法执行任何过滤（例如，因为它仅返回静态文件），则您必须在回调中过滤客户端的数据，然后再将其返回到自动填充功能。但这当然不是很有效，因为您要先下载所有数据然后丢弃其中的大部分数据（除非浏览器有帮助地对其进行缓存）。

Answer 2

由于您是从.xhtml文件中调用数据，因此它将无法过滤结果，除非您可以更新服务器端脚本以根据发布到其上的数据来接受并执行活动。

我建议您先收集静态数据，然后基于此进行过滤。看起来可能像这样：

$( function() {
  var myData;
  $.get( "http://localhost:8080/myApp/JobSearchItem.xhtml", function( data ){
    myData = data;
  } );
  $( "#searchTextField" ).autocomplete( {
    minLength: 2,
    source: myData
  } );
} );

这假设您的xhtml提供了一个数据数组（通常为JSON格式）。这很简单：

[
  "Item 1",
  "Item 2",
  "Item 3"
];

或更高级的内容：

[{
  "label": "Item 1",
  "value": 1
},{
  "label": "Item 2",
  "value": 2
},{
  "label": "Item 3",
  "value": 3
}];

如果返回的数据是其他内容：HTML表，XML或文本，则将函数与Source一起使用将对您有所帮助。如果您更新问题并提供数据示例，我们可以提供更完整的示例或指南。

更新1

给出以下JSON数据：

[{
  "id": "9000",
  "pGrade": "0",
  "label": "PROGRAMMER TEST 1"
},{
  "id": "6000",
  "pGrade": "0",
  "label": "WEB PROGRAMMER TEST 1"
}];

这不符合标准的自动完成预期数据。如果您可以将数据发布到JobSearchItem.xhtml，则可以先对其进行过滤并返回数据。如果JobSearchItem.xhtml不接受POST，那么我将对所有数据进行GET，然后再过滤。我将提供两个示例。

POST

如果要发布数据，则服务器端脚本需要知道要以变量名和值的形式发送的数据。您没有在示例中提供变量名，也没有提供JobSearchItem.xhtml内容，因此很难确定此脚本的工作原理。

在此示例中，我们将使用term，示例数据将为we。如果这是一个GET命令，它将看起来像：

JobSearchItem.xhtml?term=we

对于Post，我们将使用提交的对象：

{ "term": "we" };

以下是基本知识：

$(function(){
  var cache = {};
  $("#searchTextField").autocomplete( {
    minLength: 2,
    source: function(request, response){
      var t = request.term;
      if (t in cache){
          response(cache[t]);
          return;
      }
      var results = [];
      $.ajax({
        url: "http://localhost:8080/myApp/JobSearchItem.xhtml",
        data: {
          term: t
        },
        dataType: "json",
        method: "POST",
        success: function( data, status, xhr ) {
          $.each(data, function(k, v){
            results.push({
              label: v.label,
              value: v.label,
              id: v.id,
              grade: v.pGrade
            });
          });
          cache[t] = results;
        });
        response(results);
      });
    }
  });
});

因此，在这种情况下，如果用户输入we，则会将其发送到脚本，该脚本将过滤结果并发送回应如下所示的JSON：

[{
  "id": "6000",
  "pGrade": "0",
  "label": "WEB PROGRAMMER TEST 1"
}];

由于自动完成功能期望包含label和value的对象不能直接发送到response()。使用$.each()，我们可以迭代结果并进行调整，以便将其格式化为自动完成格式。

获取

如果您的obSearchItem.xhtml是静态的，并且仅提供JSON数据列表，则使用GET可能是收集此数据的好方法。考虑您可以先获取所有这些数据，然后再使用。这是使用自动完成功能的最常用方法，但是数据仍必须采用正确的格式。

$( function() {
  var myData = [];
  $.get("http://localhost:8080/myApp/JobSearchItem.xhtml", function(data){
    $.each(data, function(k, v){
      myData.push({
        label: v.label,
        value: v.label,
        id: v.id,
        grade: v.pGrade
      });
    });
  });
  $("#searchTextField").autocomplete({
    minLength: 2,
    source: myData
  });
});

其中之一应该起作用。

如何在JQUERY中过滤搜索输入以显示正确的自动完成功能？

2 个答案: