如何过滤搜索输入以在 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 Return 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 作为数据源时，远程服务器应该根据自动完成给它的搜索词进行过滤，return 结果已经过滤了

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

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

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 Table、XML 或文本，那么使用带有 Source 的函数会对您有所帮助。如果您更新问题并提供数据示例，我们可以提供更完整的示例或指导。

更新 1

给定以下 JSON 数据：

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

这不符合标准的自动完成预期数据。如果您能够将 POST 数据转换为 JobSearchItem.xhtml，那么您可以先过滤 return 数据。如果 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() 我们可以迭代结果并进行调整，以便将其格式化为自动完成。

GET

如果您的 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 中显示正确的自动完成？

How to filter search input to show correct autocomplete in JQUERY?

javascript

jquery

jquery-ui

jquery-ui-autocomplete