javascript - 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

我已经 fork 了该示例并进行了一些调整以适应您似乎正在做的事情。

工作示例: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。

The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

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

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

[{
  company: {
    company_name
  }
}]

如果您希望您的版本正常工作，通过 GET 调用 URL，则返回的数据应为:

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

例如:

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

我希望这会有所帮助。