CODEWITHSUNDEEP
javascriptjqueryhttp-redirectautocompleteautosuggest
lbweb
lbweb

Reputation: 91

How do I use jquery autosuggest to redirect to another url?

So I've been scouring the internet for a solution that I thought was going to be common and easy, but it seems that all the links I've browsed upon are either more than what I need or they just glaze over the parts I need and want to understand.

I'm developing a site where I would like to have a field where users can type in a state, it will autosuggest possible states and when a user selects a state it will redirect the page to another url. So: if they select "Alaska, AK" they get directed to "http://.../states/alaska"

From all that I've searched through, the jquery UI autosuggest remote source, seems to be the closest to what I need. I liked that I wasn't needing to go through a database, the values are in the "search.php" file.

In the search.php file the values are inserted as: 

$q = strtolower($_GET["term"]);
if (!$q) return;
$items = array(
"Great Bittern"=>"Botaurus stellaris",
"Little Grebe"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
"Little Bittern"=>"Ixobrychus minutus",
...

I've tested that I can change the values here to:

$q = strtolower($_GET["term"]);
if (!$q) return;
$items = array(
"Alabama, AL"=>"http://.../states/alabama",
"Alaksa, AK"=>"http://.../states/alaska",
"Arizona, AZ"=>"http://.../states/arizona",
...

In the HTML the code is:

$(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#birds" ).autocomplete({
            source: "search.php",
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });

I don't need it to show a log, how do I reformat this to get the page to redirect when selected or when the user hits the submit button?

Upvotes: 1

Views: 299

Answers (1)

Mike
Mike

Reputation: 3024

You will need to use one of these

window.location.href = "new link";

or

window.location.replace("new link");

Maybe like this

select: function( event, ui ) {
                log( ui.item ?
                    window.location.href = ui.item.value :
                    "Nothing selected, input was " + this.value );
            }

Upvotes: 1

Related Questions