jquery autocomplete json and clickable link through

Question

I've been at this for a while and I'm making very slow progress mostly because my jquery skills need improvement, I am trying though :)

I have this code:

jQuery(function() {
  jQuery("input#search").autocomplete({
    minLength: 2,
    source: function(request, response) { 
      jQuery.post("index.php?option=com_eat&view=search&format=raw", { 
        "'.$token.'": "1",
        search_string: request.term
      }, function(data) { 
        response( jQuery.map( data, function( item ) {
          return {
            value: item.name,
            url: item.url
          }
        }));
      }, "json"); 
    }
  });
});

The return from the post is json in the form:

data.url = some_url;
data.name = some_name;

I want to have the autocomplete populated by the json data.name and if any of these are clicked it directs the page to data.url.

The real issue for me is getting the JSON data from the response into the autocomplete results. There aren't too many examples of this on the web that suit my circumstances, well none that I can find.

Thanks for any help.

Martin · Accepted Answer · 2011-02-22 12:18:26Z

12

I managed to solve my problem, see below (NOTE: $token is a php variable). This allows me to send (specifically post) more than 1 variable to the php script that returns the JSON response. In my case this is necessary as I use a token to prevent unauthorised access to the search functionality.

jQuery(function() {
  jQuery("#search").autocomplete({
    source: function(request, response) {
      jQuery.ajax({
        url: "index.php?option=com_eat&view=search&format=raw",
        type: "post",
        dataType: "json",
        data: {
          search_string: request.term,            
          "'.$token.'": "1"
        },
        success: function(data) {
          response(jQuery.map(data, function(item) {
            return {
                url: item.url,
                value: item.name
            }
          }))
        }
      })
    },
    select: function( event, ui ) {
      window.location.href = ui.item.url;
    },
    minLength: 2
  });
});

The returned JSON from index.php?option=com_eat&view=search&format=raw looks like:

[{"url":"url1", "name":"name1"}, {"url":"url2", "name":"name2"}, ...]

The HTML on the page looks like so:

<input type="text" size="30" id="search" />

edited Feb 22, 2011 at 12:18

answered Feb 21, 2011 at 10:39

Martin

10.6k13 gold badges66 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sehummel Over a year ago

Thanks, Martin. This answered a question I couldn't find an answer to anywhere else.

Darren Griffith · Accepted Answer · 2020-12-02 17:46:51Z

2

The real issue for me is getting the JSON data from the response into the autocomplete results

Just looking at your code, it looks like the autocomplete should be populating correctly. Are you sure the data is coming back? If you keep having problems, try using a local data source and see if the problems persist.

if any of these are clicked it directs the page to data.url.

You can accomplish this by defining an event handler for the select event:

$("input").autocomplete({
    /* Snip */
    select: function(event, ui) {
        window.location = ui.item.url;
    }
});

ui.item refers to the item that was selected in the dropdown.

Here's an example of this working (with a local data source):
https://jsfiddle.net/gbdarren/k2q5rfdh/5/

edited Dec 2, 2020 at 17:46

Darren Griffith

3,5203 gold badges31 silver badges37 bronze badges

answered Feb 21, 2011 at 0:52

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Collectives™ on Stack Overflow

jquery autocomplete json and clickable link through

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related