Jquery UI 自动完成工作正常但得到空白结果

Question

我使用了来自http://jqueryui.com/autocomplete/#remote-jsonp 的 Jquery 自动完成示例。我已经包含了参考站点中的所有特定代码，但这在我的本地不起作用。 我只想在其中搜索公司名称。

Here i am attaching image to get the exact idea what i am getting

<script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#company_name" ).autocomplete({
	  source: "http://localhost:5050/api/v1/web-customer-list",
      type: "GET",
      minLength: 1,
      autoSelect: true,
      autoFocus: true,
      dataType : "json",
       response: function( event, ui ) {
	      var responseObj = ui.content[0];
          var companyNameList = [] ;
           for(var i = 0 ; i<= 6 ; i ++){
              companyNameList.push(responseObj[i].company.company_name) ;
           }
        },

      select: function( event, ui ) {
            console.log(event);
            console.log(ui);
        log( "Selected: " + ui.item.company.company_name + " aka " + ui.item.id );
	  }
    });
  } );
  </script>

Answer 1

我已经对示例进行了分叉，并进行了一些调整以适应您正在做的事情。

工作示例：https://jsfiddle.net/Twisty/0Lajrcfv/

HTML

<div class="ui-widget">
  <label for="companyName">Company Name: </label>
  <input id="companyName">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

jQuery

$(function() {
  function log(message) {
    $("<div>").text(message).prependTo("#log");
    $("#log").scrollTop(0);
  }

  $("#companyName").autocomplete({
    source: function(req, resp) {
      var companyNameList = [];
      $.ajax({
        //url: "http://localhost:5050/api/v1/web-customer-list",
        //type: "GET",
        url: "/echo/json/",
        type: "POST",
        data: {
          json: JSON.stringify({
            company: {
              company_name: [
                "Apple",
                "Google",
                "IBM",
                "HP",
                "Yahoo!",
                "AltaVista",
                "Yelp",
                "2600"
              ]
            }
          })
        },
        dataType: "json",
        success: function(respObj) {
          for (var i = 0; i <= 6; i++) {
            companyNameList.push({
              id: i,
              value: respObj.company.company_name[i]
            });
          }
          resp(companyNameList);
        }
      });
    },
    minLength: 1,
    autoSelect: true,
    autoFocus: true,
    select: function(event, ui) {
      log("Selected: " + ui.item.value + " aka " + ui.item.id);
    }
  });
});

因此，从示例中可以看出，source 选项可以接受来自字符串或回调函数的响应。回调函数传递了两个参数，request 和 response。

回调有两个参数：

一个 request 对象，具有单个 term 属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入“new yo”，则自动填充词将等于“new yo”。

response 回调，它需要一个参数：建议给用户的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式。在请求期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，您也必须始终调用响应回调。这可确保小部件始终具有正确的状态。

根据您的代码，您似乎不会过滤客户端，您只会从GET 请求返回的任何内容中接受前 6 个。所以我们在我的例子中忽略了req.term。然后，我们只真正关心收集结果、正确格式化它们并将它们返回给resp()。

对于我的工作示例，我们POST 数据，因此它可以作为响应回显。根据您的示例，您期望某种类型的对象，大致类似于：

[{
  company: {
    company_name
  }
}]

如果您希望您的版本工作，通过GET 调用 URL，返回的数据应该是：

具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

例如：

[{
  label: "Apple",
  value: 1
},
{
  label: "Google",
  value: 2
}];

我希望这会有所帮助。