sandygodhaniya sandygodhaniya - 11 days ago 6
jQuery Question

Jquery UI autocomplete works fine but getting blank result

I have used Jquery autocomplete example from http://jqueryui.com/autocomplete/#remote-jsonp. I have included all the specific code from the reference site but that doesn't work in my local.
I want only company name to be search in it.

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

I have forked over the example and made some adjustments to fit what you appear to be doing.

Working Example: 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);
    }
  });
});

So, as you can see from the example, the source option can accept the response from a string or callback function. The callback function is passed two parameters, request and 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.

Based on your code, it looks like you are not going to filter clientside, you're just going to accept the top 6 from whatever your GET request returns. So we just ignore req.term in my example. We're then only really concerned about collecting the results, formatting them properly, and returning them to resp().

For my working example, we POST the data so it can be echo'd back as a response. Based on your example, you're expecting an object of some type, roughly similar to:

[{
  company: {
    company_name
  }
}]

If you want your version to work, where you call the URL via GET, the data returned should be:

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

For example:

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

I hope this helps a bit.

Comments