+ Post New Thread
Results 1 to 9 of 9
Web Development Thread, Ajax Combobox? in Coding and Web Development; I'm wanting an input field on a page which has an ajax autocomplete - with the data coming from a ...
  1. #1

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,096
    Thank Post
    511
    Thanked 2,310 Times in 1,786 Posts
    Blog Entries
    24
    Rep Power
    803

    Ajax Combobox?

    I'm wanting an input field on a page which has an ajax autocomplete - with the data coming from a database. However, I need it to have a 'value' with it too, so akin to a Combobox.

    Anyone got any ideas how I'd do this?

    A workflow example - Sometime types smit into the box and the list of anyone with 'smit' in their name appears in the list, you can then click the one you want, and it is selected and its value is now set in your form.

    Is there any such thing premade through a framework like JQuery UI or similar? Or am I going to have to construct this myself using a hidden field, and javascript onclicks in a custom div?

  2. #2

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,394
    Thank Post
    108
    Thanked 266 Times in 197 Posts
    Rep Power
    168
    There is an example here, is this what you mean?

    It should be possible to use a jQuery get to fetch data from an external file and change the option list for the select object.

    I will try to upload some sample code later when I am back home...

  3. Thanks to CESIL from:

    localzuk (26th April 2013)

  4. #3

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,096
    Thank Post
    511
    Thanked 2,310 Times in 1,786 Posts
    Blog Entries
    24
    Rep Power
    803
    I want them in the same box (which was kinda the point of 'combo' as it is supposed to combine a list with typed entry - never understood why people call HTML select's comboboxes as they can't do this), without anything pre-populated until they've typed the search sequence.

    EDIT: Just noticed you can hide the select... This might work, if I can autopopulate the combobox based on the text entry.
    Last edited by localzuk; 24th April 2013 at 03:08 PM.

  5. #4

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,096
    Thank Post
    511
    Thanked 2,310 Times in 1,786 Posts
    Blog Entries
    24
    Rep Power
    803
    Well, I now have my source file which can feed results to the combobox, but I'm at a bit of a loss as to how to fill the select.

    I'm thinking I would perform my Ajax stuff in the _source function, which is the function which is called by 'autocomplete' on the input box.

    Just don't know how to get the data - I can get the php to return the data in whatever format I need, be it JSON or plain HTML.

  6. #5

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,394
    Thank Post
    108
    Thanked 266 Times in 197 Posts
    Rep Power
    168
    If you have the source file to deliver the data then if you get that to return comma separated strings then you should be able to use javascript to add the html to the select to update the option elements.

  7. Thanks to CESIL from:

    localzuk (26th April 2013)

  8. #6

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,374
    Thank Post
    625
    Thanked 951 Times in 653 Posts
    Blog Entries
    2
    Rep Power
    318
    I use jQuery UI Autocomplete to do this on a text input field, and update a hidden ID field with the actual value (ID) - the label (name) remains in the text field.

    Javascript:

    Code:
    $(".name").autocomplete({
    	source: "/ajax/lookup",
    	minLength: 2,
    	select: function( event, ui ) {
    		$("input[name=id]").val(ui.item.id);
    	}
    });
    PHP returns:

    Code:
    $result = do_search($query);
    foreach ($result as $row)
    {
        $items[] = array('label' => $row['name'], 'id' => $row['id']);
    }
    
    echo json_encode($items);
    Last edited by webman; 26th April 2013 at 01:17 PM.

  9. Thanks to webman from:

    localzuk (26th April 2013)

  10. #7

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,096
    Thank Post
    511
    Thanked 2,310 Times in 1,786 Posts
    Blog Entries
    24
    Rep Power
    803
    That is just a tad easier! I shall have a play shortly.

  11. #8

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,096
    Thank Post
    511
    Thanked 2,310 Times in 1,786 Posts
    Blog Entries
    24
    Rep Power
    803
    Well, that worked instantly. Didn't think it'd be that simple.

  12. #9

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,374
    Thank Post
    625
    Thanked 951 Times in 653 Posts
    Blog Entries
    2
    Rep Power
    318
    Quote Originally Posted by localzuk View Post
    Well, that worked instantly. Didn't think it'd be that simple.
    Excellent I like it when things just work!

SHARE:
+ Post New Thread

Similar Threads

  1. Replies: 2
    Last Post: 12th October 2010, 08:38 AM
  2. Script AJAX form responses to RM easymail plus
    By MicrodigitUK in forum Scripts
    Replies: 0
    Last Post: 23rd November 2009, 11:19 AM
  3. Problems with Ajax when forwarding from MS Proxy Server 2.0 to CachePilot
    By dwhyte85 in forum Internet Related/Filtering/Firewall
    Replies: 2
    Last Post: 22nd May 2009, 08:30 PM
  4. ajax broke?!
    By browolf in forum Windows
    Replies: 4
    Last Post: 18th April 2007, 01:33 PM
  5. reverse proxy ajax apps
    By CyberNerd in forum Web Development
    Replies: 3
    Last Post: 15th June 2006, 07:32 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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