HOW TO MAKE AUTOSUGGEST WORK WITH AJAX

jayedgar's Avatar

jayedgar

07 Mar, 2011 08:59 PM

Someone posted the solution in a response, so I thought I'd make it obvious for those who follow:

Be sure the AJAX data you're getting has the exact same format as show in the static example:

[{"value": "1", "name": "Apple"}, {"value": "2", "name": "Banana"}]

Then you need to use all three options when you make the call:

$("#myInput").autoSuggest("http://www.mydomain.com/mypage.php", {selectedItemProp: "name", selectedValuesProp: "value", searchObjProps: "name"});

I hope you find this helpful.

Jay

  1. 1 Posted by Barnoose on 12 Mar, 2011 09:49 AM

    Barnoose's Avatar

    Also, it looks like it does not currently support jquery 1.4.4.

  2. 2 Posted by jayedgar on 12 Mar, 2011 11:04 AM

    jayedgar's Avatar

    See the other thread--it does support 1.4.4. However, actual data may need this format:

    [{ "id": "1164", "label": "Jay Edgar", "value": "Jay Edgar" }]

    Note the id, label AND value.

    J

  3. 3 Posted by Rob Williams on 17 Mar, 2011 10:30 AM

    Rob Williams's Avatar

    Thanks Jay - been scratching my head for an hour trying to figure out why it wasn't working for me. Maybe *required could be added in the script description to those fields that are indeed required?

    Great plugin though! Keep up the good work Drew!

  4. 4 Posted by jayedgar on 17 Mar, 2011 01:33 PM

    jayedgar's Avatar

    You bet, Rob. Given how long things have been untouched, I think we should assume the code will not be receiving any more attention, unless someone else picks it up and forks it.

  5. 5 Posted by barnoose on 17 Mar, 2011 10:20 PM

    barnoose's Avatar

    Thanks Jay - all good now.
    My problem was a little different. I thought the plugin had problems with jquery 1.4.4 but it was actually the format of my data.
    My data was not quite JSON - more jscript object literal;
    [{ id: "1", name: "Jay Edgar"}] Although this worked with jquery 1.3.*, I had to fix the json as below for jq 1.4.4;
    [{ "id": "1", "name": "Jay Edgar"}] Cheers.

  6. 6 Posted by benlittle1991 on 17 Aug, 2011 06:17 PM

    benlittle1991's Avatar

    Hi JayEdgar,

    I have my search working as shown above. I now need to get the ID's of the data chosen. How would I go about doing this please. I have tried splitting the array. exploding the array etc.. to no succes.

    Thanks in advance.

  7. 7 Posted by jayedgar on 17 Aug, 2011 07:32 PM

    jayedgar's Avatar

    Ben, try:

    $('#as-values-'+controlSuffix).val();

    where 'controlsuffix' is the name of the original control. the autosuggest adds a control with the prefix name '#as-values' to the DOM. If you look at the live DOM in your browser, you'll figure it out.

    Good luck.

  8. 8 Posted by benlittle1991 on 17 Aug, 2011 07:37 PM

    benlittle1991's Avatar

    Hi Jayedgar,

    Many thanks for your reply.

    I currently have - asHtmlID: "cat" - set as my ID. So with my understanding, the code shown above should be:

    $('#as-values-'+cat).val();

    Another question if possible, once I have the ID's using the code above, how can I access these ID's individually to, lets say, store in a php variable? I am wanting to store the ID in a database once they have chosen a maximum of 3 suggested elements.

    Many thanks in advance.
    Ben.

  9. 9 Posted by benlittle1991 on 17 Aug, 2011 07:40 PM

    benlittle1991's Avatar

    If this helps further - This is the code I am using to try and split, access and save the variables, but to no success :(

    <script type="text/javascript">
    var json = $(".as-values+cat").val();
    data = jquery.parseJSON(json)
    alert($(".as-values").val());
    alert(data[0].value);
    alert(data[1].value);
    alert(data[2].value);
    </script>
    
  10. 10 Posted by jayedgar on 17 Aug, 2011 07:46 PM

    jayedgar's Avatar

    Ben use the 'inspect element' option in your browser to see what the values of that control look like. It's the best way to attempt to figure out your code.

  11. 11 Posted by Chris on 06 Sep, 2013 02:41 PM

    Chris's Avatar

    Really useful post here. I would never had known all three were required!

    Thanks!

    Chris

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac