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对象，具有单个术语属性，该属性引用文本输入中当前的值。例如，如果用户输入＆＃34; new yo＆＃34;在城市字段中，自动填充术语将等于＆＃34; new yo＆＃34;。

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

根据您的代码，看起来您不会过滤客户端，您只是接受来自GET请求返回的前6名。所以我们在示例中忽略req.term。我们只关心收集结果，正确格式化并将其返回resp()。

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

[{
  company: {
    company_name
  }
}]

如果您希望自己的版本正常工作，可以通过GET调用网址，则返回的数据应为：

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

例如：

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

我希望这会有所帮助。

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

1 个答案: