CODEWITHSUNDEEP
jqueryautocomplete
user780483
user780483

Reputation: 3063

Jquery autocomplete links

I use jquery's autocomplete on my site. Right now the menu it produces has links that you can click.

However, when you click them they simply go into the text field. I would like to be able to click on the link (or press enter) and be taken to another page, specifically change the URL's get variable.

To make this a little more complicated, each item in the drop down is assigned an ID by my mysql database. The link that each item should go to is index.php?id=$id where $id is its ID from the database.

Since I have hundreds of items in the menu, how can I alter the current code to include links that redirect to index.php?id=$id getting $id from my database?

CODE: standard code from http://jqueryui.com/demos/autocomplete/

<script>
$(function() {
    var availableTags = [
        <?php
        include 'connect.php';

        $result=mysql_query("SELECT * FROM searchengine");

        while ($row=mysql_fetch_assoc($result)){

        $title=$row['title'];
        $id=$row['id'];

        echo "\"$title\",";

        }


        ?>
    ];
    $( "#tags" ).autocomplete({
        source: availableTags

    });

});
</script>

P.S. I use php inside the jquery to generate a list of variables.

Upvotes: 3

Views: 1363

Answers (3)

Andrew
Andrew

Reputation: 509

Not sure if you're still trying to get this sorted. Here's the solution that I used

Basically, you get (using the get method) the id you're transmitting (or search query) and then do a mysql query based on it. One of the things that is returned is the id and then you attach this to part of your URL.

For example, I needed to attack a category:

<script type="text/javascript">
                    function test(){
                        var i = document.createElement('input');
                        i.type = 'hidden';
                        i.name = 'cat';
                        i.value = cat;
                        document.getElementById("searchForm").appendChild(i);
                    }

                </script>

I used that right after my form. This attached the category name as a part of the submitted url. (eg. &cat=dfgdfg). You could do the same with your id.

The option that worked best for me was that on submit, the database would again be queried and the id (along with a redirect) was used to take you to the page that was wanted.

Hope that makes sense.

In summary: The way you deal with it is getting the id that is associated with the page you want and this is attached to your submit task (eg. onsubmit="search.php=$id")

Upvotes: 0

MLS
MLS

Reputation: 895

change your echo title line to echo <a href="index.php?id=$id>$title</a>;

Upvotes: 1

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

Since I don't know PHP, I can't help you with the server-side code, but it should be easy enough to figure out once you understand the different data that autocomplete can use.

For the widget's data source, you can specify an array of objects with a label and value property. You could leverage the value property to store the id from your database, and then define an event handler for the select event to send the user to the correct page.

Here's an example:

$("input").autocomplete({
    source: [
        { label: "Home", value: '3' },
        { label: "Admin", value: '4' },
        { label: "Search", value: '55' }
    ],
    select: function(event, ui) {
        /* Prevent the input from being populated: */
        event.preventDefault();
        /* Use ui.item.value to access the id */
        window.location.href = "/index.php?id=" + ui.item.value;
    }
});

Here's a working (simpler) example: http://jsfiddle.net/j2JUb/

As a side note, I would consider using the remote datasource option that autocomplete provides if you have a ton of possible results.

Upvotes: 1

Related Questions