javascript - 如何过滤搜索输入以在 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了解更多详情。

注意如果您的远程服务器无法进行任何过滤(例如，因为它只返回一个静态文件)，那么您必须在将数据返回到自动完成之前在回调中过滤数据客户端。但这当然不是很有效，因为您一直在下载所有数据，然后丢弃大部分数据(除非浏览器有帮助地缓存它)。