SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery and ajax question

    Hi Guys!

    I am creating a jQuery location suggestion tool (i.e. when the user types a location it fetches a list of suggested locations and displays them underneath the input box). You have probably seen something similar on search forms on some websites.

    I've written the jQuery which works perfectly well. All I am looking to do now is when the user presses enter it should get the first term returned and select it (i.e. enter it into the input box). So just to clarify:

    1. User types a phrase (i.e. Essex)
    2. The ajax/jQuery script returns 5 matches for essex (i.e. Brentwood, Essex - Chigwell, Essex etc).
    3. The user presses enter and it selects the first match (pre fills the input box with this value).

    Any idea how I modify my script to accomodate this?

    Here's the script I am using at the moment:
    Code JavaScript:
    $(document).ready(function() 
    {
    	$("#location_ajax").keyup(function(event)
    	{
    		$.get("../ajax/locations.php", { input: $(this).val(), standardajax: '1' },function(data)
    		{
    			if(data !== "")
    			{
    				$("#location_results").html(data);
    				$("#location_results").show();
    			} else
    			{
    				$("#location_results").hide();
    			}
    		});
    	});
     
    	$("#location_ajax_search").keyup(function(event)
    	{
    		$.get("./ajax/locations.php", { input: $(this).val(), standardajax: '2' },function(data)
    		{
    			if(data !== "")
    			{
    				$("#location_results").html(data);
    				$("#location_results").show();
    			} else
    			{
    				$("#location_results").hide();
    			}
    		});
    	});
    });

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The easiest way would be to assign a submit event to the search form and have it seek out the first result (if it exists from within the location results) and grab the value from it, see the below example:

    Code JavaScript:
    var $search = $('#location_ajax_search');
     
    $search.parents('form').submit(function(e) {
        e.preventDefault();
     
        var $results = $('#location_results');
     
        if ($results.length) {
            $search.val($('child-element:first', $results).html());
        }
     
        $(this).submit();
    });

  3. #3
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    The easiest way would be to assign a submit event to the search form and have it seek out the first result (if it exists from within the location results) and grab the value from it, see the below example:

    Code JavaScript:
    var $search = $('#location_ajax_search');
     
    $search.parents('form').submit(function(e) {
        e.preventDefault();
     
        var $results = $('#location_results');
     
        if ($results.length) {
            $search.val($('child-element:first', $results).html());
        }
     
        $(this).submit();
    });
    Thanks, do I need to change 'form' to my form ID on this line:

    $search.parents('form').submit(function(e)

  4. #4
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, the content of location_results looks like this (links rather than divs or list). Is it possible to get this info?

    Code JavaScript:
    <div id="location_results" style="display: block;">
    <a title="Click to add this location" onclick="saveloc('SG4', 'Breachwood Green, Hertfordshire', '2', 'postcode')">
    <br>
    <a title="Click to add this location" onclick="saveloc('IV42', 'Breakish, Highland', '2', 'postcode')">
    <br>
    <a title="Click to add this location" onclick="saveloc('DD9', 'Brechin, Angus', '2', 'postcode')">
    <br>
    <a title="Click to add this location" onclick="saveloc('LD3', 'Brecon, Powys', '2', 'postcode')">
    <br>
    <a title="Click to add this location" onclick="saveloc('SK6', 'Bredbury, Cheshire', '2', 'postcode')">
    <br>
    </div>

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can use your own reference, i only used the above code as example so you could see a simple way of selecting the form. The above HTML you posted is invalid as you seem to be missing the value and ending tag </a>, the above example i posted should work fine given a value exists within the <a> element.


Bookmarks

Posting Permissions

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