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

Question

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

这是我的代码

       $( 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 );
        });
      }
    });
  } ); 

JobSearchItem 返回 JSON

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

html

 <h:body>
<f:view transient="true">
  <tp:header/>
  <tp:searchForm/>



  <div id="results">

  </div>

 <h:panelGroup  id="dTable" class="container">
        </h:panelGroup>


</f:view>
   <f:view transient="true">
<div class="jobEntity">
  <div class="job-container-header">
    <h4>#{testBean.jobEntity.toString()}</h4>

    <c:if test="#{testBean.jobEntity.validURLConnection}">
      <a href="#{testBean.jobEntity.pGradeDescriptionLink}" 
         class="btn btn-info-One"   
         target="_blank">[ Test ]</a>
    </c:if>

    <h4>#{testBean.jobEntity.mu} - #{testBean.jobEntity.muDescription}</h4>
    <h4>#{testBean.jobEntity.specialNotes}</h4> 
    <h4>#{testBean.jobEntity.syRgeMnSepMsg}</h4>
  </div>

  <c:if test="${testBean.jobEntity.sectionToDisplay eq 'Range'}">
    <table class="table">
      <tbody>
        <tr>
          <th></th>
          <c:forEach var="stepNumber" begin="1" end="#{testBean.jobEntity.stepSize}">
            <th>Step #{stepNumber}</th>
          </c:forEach>
        </tr>
        <c:forEach items="#{testBean.jobEntity.jobRows}" var="jobRow">
          <tr>
            <th>#{jobRow.rateType}</th>
            <c:forEach items="#{jobRow.steps}" var="step">
              <td>#{step.amount}</td>
            </c:forEach>
          </tr>
        </c:forEach>
      </tbody>
    </table>
  </c:if>
</div>

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"
}];

这不符合标准的自动完成预期数据。如果您能够 POST 数据到 JobSearchItem.xhtml，那么您可以让它先过滤并返回数据。如果JobSearchItem.xhtml 不接受 POST，那么我将预先对所有数据执行 GET，然后稍后对其进行过滤。我将包括两者的示例。

发布

如果您要发布数据，服务器端脚本需要知道您以变量名称和值的形式发送哪些数据。您没有在示例中提供变量名，也没有提供 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"
}];

由于 Autocomplete 期望包含 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
  });
});

其中一个应该可以工作。