CODEWITHSUNDEEP
jqueryautocomplete
Devin
Devin

Reputation: 59

jQuery autcomplete not displaying

I've looked through many of the previous posts about this, but I think mine is much more simple than what I've found. My field is requesting data successfully, but is not displaying it. I would assume this is related to the CSS to display it. I'm using the jQuery UI CSS to display it, as I do on other sites I've designed:

<link href="/css/console/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

Here is where I'm trying to display it. What am I doing wrong here? I've got this working on other sites.

<input type="text" name="userSearch" id="userSearch"/>
<input class="button" style="top: -1px; margin-left: 5px;" type="button" value="SEARCH" />
<input type="hidden" id="hiddenUserWom" value="" /></span></div>
      <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
      <script type="text/javascript">
      $('#userSearch').autocomplete({
            source: '/console/ajax/user_search_autocomplete.php',
            minLength: 3,
            select: function (event, ui) {
                $("#userSearch").val(ui.item.label); 
                $("#hiddenUserWom").val(ui.item.id);
        }
      });

      $(document).ready( function () {
          $("#userSearch").focus();
      });
      </script>

Here is the successful returned data: This is an example of the return:

[ { "label": "5U5NU - Devin Parker - Vacaville, CA", "id": "5U5NU" }]

Description of data format for jQuery UI as taken from the official site:

Expected data format

The data from local data, a url or a callback can come in two variants:

An Array of Strings: [ "Choice1", "Choice2" ] An Array of Objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

This should work properly.

Here is the site: http://wombusiness.com/console/members/

It's the power search field that needs to autocomplete.

Upvotes: 0

Views: 207

Answers (2)

IOrlandoni
IOrlandoni

Reputation: 1828

The problem is in the return from the PHP. If you try the exact same but with a fixed set in an array as source the autocomplete works perfect.

The JSON encoding seems fine.

I know you don't need it or use it, but please try adding a value to each item. I'm not sure, but the value might be a required field, and it'll be easier for you to test it than it would be for me.

Upvotes: 0

Har
Har

Reputation: 5004

Put your autocomplete inside your $(document).ready

<input type="text" name="userSearch" id="userSearch"/>
<input class="button" style="top: -1px; margin-left: 5px;" type="button" value="SEARCH" />
<input type="hidden" id="hiddenUserWom" value="" /></span></div>
  <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
  <script type="text/javascript">


  $(document).ready( function () {
  $('#userSearch').autocomplete({
        source: '/console/ajax/user_search_autocomplete.php',
        minLength: 3,
        select: function (event, ui) {
            $("#userSearch").val(ui.item.label); 
            $("#hiddenUserWom").val(ui.item.id);
    }
  });
      $("#userSearch").focus();
  });
  </script>

Problem #2 $("#userSearch").val(ui.item.label); You are overwriting your autocomplete with its own data.

Upvotes: 2

Related Questions