Jquery Autocomplete Redirect

All,

Not sure if this has been posted yet, but I’m trying to get Jquery’s Autocomplete to redirect a user based on their input - according to Jquery, it works like this:

[INDENT]An autocomplete plugin can be used to search for a term and redirect to a page associated with a resulting item. The following is one way to achieve the redirect:

var data = [ {text:‘Link A’, url:‘/page1’}, {text:‘Link B’, url: ‘/page2’} ];
$(“…”).autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
[/INDENT]

Essentially, I have a localdata.js file containing variables. I’d like to do like the above example suggests and have the form text show ‘This is an example’ and the url redirect be something like ‘/test/example’

Here is some sample code of the autocomplete, taken straight from http://docs.jquery.com/Plugins/Autocomplete -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

Thank you very much in advance for any help you can offer!

I ran into a similar issue a few months ago when developing a drupal module that uses the jQuery autocomplete.

In my situation, rather than calling a js file I was calling a php function that queried the database to get the search terms and their associated url. In any case, I think the outcome will be similar.

In the end, I passed in a string to the autocomplete function and simply parsed out the values. Here is what I did:

//Auto Complete
        $('#enable_input').autocomplete('my_php_function_call_here',{
            autoFill: true,
            delay:0,
            max:3,
            width: 366,
            formatItem: function formatItem(row){
                return row[2];
            }
        })
        .result(function(event, row){
            location.href = row[3];
        });

In my example, row[2] is the search term to populate the autocomplete drop down list and row[3] is the associated URL.

Read more about the autocomplete integration

Hope this helps.

My guess is that I could get this to work…BUT

I am fairly inexperienced and am bootstrapping this project and want to do this particular site anyway I know how - even if the method is “wrong”. The method that I come up with can suffice until (and if) the project becomes viable enough to get someone to do it right. I’m not using a database (don’t laugh) because I don’t know of an easy way to integrate one. A client-side solution here…

That being said, and in reference to nimp’s reply - I wonder if the variable could be split?

Maybe someone could elaborate on having the variable split into a two-part array. The first part could be the text used for the autocomplete, and the second part could act as the url for the redirect.

I quickly created a simple tutorial for you to take a look at. This example uses an inline dataset.

:slight_smile:

Wow - thank you very much! That’s pretty much exactly what I’m looking for! I will take what you’ve done here - and integrate with my application!

I won’t be able to do it 'til tonight though - if I run into any “snags”, I’ll get back in touch if you don’t mind.

Thanks for taking the time!

Alright…I found out this evening that the Jquery Autocomplete plugin has been replaced by the Jquery UI Autocomplete. Supposedly things are relatively similar.

Any chance ‘nimpkish-media’ - or anyone else can replicate the exact same solution as mentioned above and referenced in the following tutorial? http://nimpkish.com/blog/jquery-autocomplete-and-data-set

According to their documentation - the UI version works a tiny bit differently - see code below:

<script type="text/javascript">
	$(function() {
		var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
		$("#tags").autocomplete({
			source: availableTags
		});
	});
	</script>


	
<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags">
</div>

</div>

Thanks in advance!

Here is the same example using jQuery Autocomplete UI.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Autocomplete Testt</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
	$(document).ready(function() {
		var data = [
			{label: 'Google', value: 'http://google.com'},
			{label: 'Yahoo', value: 'http://yahoo.com'},
			{label: 'BMW', value: 'http://bmw.com'},
			{label: 'Bing', value: 'http://bing.com'}
		];
		
    	$("input#autocomplete").autocomplete({
			source: data,
			focus: function (event, ui) {
				$(event.target).val(ui.item.label);
				return false;
			},
			select: function (event, ui) {
				$(event.target).val(ui.item.label);
				window.location = ui.item.value;
				return false;
			}
		});
  	});
  </script>
</head>
<body>
<input id="autocomplete" />
</body>
</html>

Have Fun!

Revisiting an old thread - solution is working great by the way!

One more question:

Can you load the javascript ‘Data’ variable externally? If so, please document the process as I’d like to not repeat that variable on every page that needs it. I tried, and it didn’t work - not sure if it was something simple like double vs. single quotes.

Thanks again in advance!