jQuery and ajax question

JavaScript
1

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:


$(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

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:

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

Thanks, do I need to change ‘form’ to my form ID on this line:

$search.parents(‘form’).submit(function(e)

4

Also, the content of location_results looks like this (links rather than divs or list). Is it possible to get this info?


<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

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.