3

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.

Improve this question

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I got the code to work but the preventDefault isnt working. It also doenst work in the jfiddle example
@user780483: I'm using FF 4.0 and Chrome 12 and in both the input is not populated when you click an item. You could try return false at the end though.
1

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

Improve this answer

1 Comment

uh...the current code shown above is working. My concern is turning the items into links.
0

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")

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.