SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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;
    });

    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 -

    Code:
    <!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!

  2. #2
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    //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.

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I quickly created a simple tutorial for you to take a look at. This example uses an inline dataset.


  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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-auto...e-and-data-set

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

    Code:
    <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!

  7. #7
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the same example using jQuery Autocomplete UI.
    Code HTML4Strict:
    <!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!

  8. #8
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


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
  •