Remove search history

Question

I have a search bar which is really simple, looks like this:

<form action="/search" method="get">
    <input type="text" name="q" value=""/>
    <input type="submit" value="Search"/>
</form>

http://jsfiddle.net/Vw83T/

What I don't like about it, is that when I click on the search bar (double click in it) or type in a letter it starts to drop down a menu and show my past search queries. The problem is that it shows up queries from my past searches on other sites that are not relevant to my current site. Clearing my browser history/cache won't help because I don't want my visitors to experience the same thing.

Is there a way to replace the suggestions with a customized list of tags, or the one like Youtube which shows up a list of suggestions based on popularity and not include searches from external sites?

(I did some searches and found some autosuggest jquery plugins that I think does what I want. But I am no sure if these will override the current autosuggest that is causing problems so I'll post my question anyway)

If none of the above is possible with simple adjustment I'm fine with just simply removing the suggestions altogether like the searchform here in stackoverflow.

Answer 1

What I don't like about it, is that when I click on the search bar (double click in it) or type in a letter it starts to drop down a menu and show my past search queries

You can remove that feature by adding autocomplete="off" to the control.

jsFiddle.

Is there a way to replace the suggestions with a customized list of tags, or the one like Youtube which shows up a list of suggestions based on popularity and not include searches from external sites?

Yes, but you have to custom build it with an element to hold the results and the server-side code to populate the suggestions.

Answer 2

The autocomplete suggestions are based on the name of the input box. Since q is the most common name for a search textbox you get hints from other site searches. S in order to get hints from only your site search use a unique name for your textbox.

<form action="/search" method="get">
    <input type="text" name="someuniquename-search-q" value=""/>
    <input type="submit" value="Search"/>
</form>