Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts

    ui autocomple syntax

    I am currently, for reason that go way beyond this post, grabbing a JSON string and populating a div with it.

    What I am looking to do, is grad the contents of that div, and and generate the autocomplete drop down so the user can arrow down like it was a select box.

    The contents of #searchResults:
    Code:
    [{"Display":"Dallas, TX","Rank":78357,"Class":"city"}, {"Display":"Dallas, GA","Rank":216,"Class":"city"}, {"Display":"DFW - DFW - Dallas-Fort Worth International Airport, TX","Rank":14375,"Class":"air"}]
    Code:
    					var suggestions = $('#searchResults').text();	
    					var jsonp = suggestions;
        					obj = $.parseJSON(jsonp);
    
    						jQuery('#SearchBox').autocomplete({
    							source: obj
    						})
    						.data( "autocomplete" )._renderItem = function( ul, item ) {
    							return $( "<li></li>" )
    							.data( "item.autocomplete", item )
    							.append( "<a>" + item.Display + "</a>" )
    							.appendTo( ul );
    						};
    It makes the UL but, I can't get it to populate correctly.

    Am I missing something painfully obvious?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    jQuery UI autocomplete expects the json data to have either a 'value' or 'label' property (or both) - and these are displayed in the generated dropdown.

    If you can alter your #searchResults to be:

    Code:
    [{"value":"Dallas, TX","Rank":78357,"Class":"city"}, {"value":"Dallas, GA","Rank":216,"Class":"city"}, {"value":"DFW - DFW - Dallas-Fort Worth International Airport, TX","Rank":14375,"Class":"air"}]
    then the autocomplete should work with just:

    Code:
    	$("#quickfind").autocomplete({
        source: obj
    	});
    I think.

    If there's no other reason to hold the searchresults in an element you could just point the source directly at the file producing the results, which would make your code a little neater.

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Seeing how beautifully written jQuery documentation is, no wonder I missed the required value || label.

    Turns out what I am able to grab from the remote server is just JSON so my JSONP requests kept crapping out. I went the PHP cURL route, strreplace the "display" for "value", passed it back through the autocomplete and finally, it works.

    I appreciate the extra eyes.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •