Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you've never seen before :)
Again, all you need is two lines of code, links to JavaScript and CSS files and that would be it.
Take a look at the Demo | Download SearchField
Features
SearchField features 3 states for search input field based on user's actions. We have inactive state, on click state (on focus to be exact) and inactive with user inputted text. You've seen these features on many sites but the difference here is that all you need to do is provide id to your search field, script takes it from there.
Additional feature, that can be turned on and off, is a search suggestion terms displayed as a dropdown box below the search field. You can navigate with up and down keys, or your mouse and you can edit your own keywords. Again, there is a difference between this and other suggestion or autocomplete scripts. With SearchField you don't have to worry about additional markup or id's for dropdown list, it is generated automatically.
Implementation
Download the script, extract the files and place the folder named "searchfield" in the root of your site. Add these two lines of code inside your head tag.
<link href="/searchfield/searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/searchfield/searchfield.js"></script>
Now, all you need inside the markup is a search input field with exact id as named in .js file. Default id is "searchfield" but you can use anything.
Important thing is the parent element of the search field. I suggest using <p> tag as a parrent element. Here's how original form looks like, so you can use something similar.
<form id="searchform" action="" method="post">
<p><input type="text" id="searchfield" name="searchfield" value="" />
<button type="submit">Go</button></p>
</form>
At the end modify css file to make it blend into your site.
Files
There are 2 main files, searchfield.js file and searchfield.css. Inside the .js file you can edit 4 parameters and get the results you want. The appearance of your field and dropdown suggestion box is modified via .css file. The class names are commented so you'll find your way around it pretty well.
Parameters
Inside the searchfield.js we have 4 parameters: id, defaultText, suggestion, suggestionText.
First one represents id of the search field you want to add this script to. You can use your own id just make sure that it matches the search field in your html file. defaultText is a text that your search field will use as default value. When you set suggestion=true the script will generate search suggestions list for search field based on content of variable called suggestionText. If you don't want suggestion list to appear set suggestion=false.
Preview and Download
Note: since Safari has it's own behaviors for input elements this script is disabled for that browser.
dodot 9 Jan, 2008
SMASHINGAPPS.COM 9 Jan, 2008
Colin 9 Jan, 2008
Where does the autosuggest word list come from? Can you be more descriptive? Does it "automatigicaly learn words" or do you have to create a search term list?
cssglobe 9 Jan, 2008
kyle 10 Jan, 2008
kyle 10 Jan, 2008
I wanted to enable this for Safari anyway, and did it by adding the line
this.safari = false;
below the line (38)
this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
On searchfield.js
cssglobe 10 Jan, 2008
cssglobe 10 Jan, 2008
Moz 16 Jan, 2008
hcabbos 18 Jan, 2008
ovi 19 Jan, 2008
ovi 19 Jan, 2008
The problem is that the menu loads an htc file in IE (adx.htc) which makes the mouseover work in IE
ADxMenu behavior - standard - v0.2
Anybody can give me some hints on this? (I wasnt abble to find anything related to z index in the htc file)
Thank you.
Marc 26 Jan, 2008
and now with german 'umlauts' please :-)
Dragon 27 Jan, 2008
cssglobe 27 Jan, 2008
Vectorpedia (Rick) 28 Jan, 2008
meyabilisim 30 Jan, 2008
Thomas 21 Feb, 2008
Cheers
cssglobe 22 Feb, 2008
ercan 27 Feb, 2008
line 179
for(var i=0;i<li.length;i++){
:(
Thomas 3 Mar, 2008
Cheers
Thomas 3 Mar, 2008
Cheers
Ledzep 14 Mar, 2008
great work, thanx for!
Question: pressing the "Go"button, the site will be reloaded.
Is this necessary, when not: where can I disable this feature.
John
cssglobe 14 Mar, 2008
in the example I am using button type="submit". That submits the form. You can use button type="button" instead and the form will not be submitted.
Thomas 17 Mar, 2008
How do you link a search phase/term to a page? Meaning if I search for portfolio than press go how does it know to go to a page called portfolio?
Thanks for your time
eric 25 Mar, 2008
Alan Hogan 9 Apr, 2008
ven 17 Apr, 2008
I got a question… I have more then 1,000 suggestion Text, when I type "a" letter in textbox, its going down with huge right side browser scroll, can I control this with auto suggest display scroll (height may be 200px). Please help me on this issue.
Richard 17 Apr, 2008
as I wanted to use it for retrieving live data?(coldfusion??)
Thanks
Gunter 1 May, 2008
convert umlaute with entities
example: ä - ä
hope it helps
gaby 7 May, 2008
Francisco 13 May, 2008
chester.. 24 May, 2008
http://www.css-lessons.ucoz.com/textbox-css-examples.htm
Orides Tomkiel 30 May, 2008
John 31 May, 2008
sezer 31 May, 2008
http://css-lessons.ucoz.com/css-parameters.htm
maggl 5 Jun, 2008
how to sort the var suggestionText? anyone an answer?
wwwcemil 7 Jun, 2008
MarK 10 Jun, 2008
I'd like to know if it is possible to use it with a MySQL database to access data, and what i have to modifie to use it
Thanks
Pete 12 Jun, 2008
I guess this is something to do with the Form Action. I have cgi/php.
Can anyone please help as I would love to use this script.
Many thanks
asp-dersi 12 Jun, 2008
create my own website/web page but i
dont know how to go about doing it so
can you please help me out
Kyrill 8 Jul, 2008
that great.
But, how can I solve the problem, that I will load the "static list of suggestion options" from a text file or database?
Phil 7 Aug, 2008
I am trying to use it for a text field that is loaded in an ajax call. In this case, the searchfield textbox hasn't been rendered when the script loads and runs.
I am trying to call addEvent after the ajax call but it still isn't working.. Any ideas?
Phil 7 Aug, 2008
Mario 8 Aug, 2008
I just wanted to add some interactivity with:
if(field && safari){
field.value = defaultText;
field.onfocus = function(){ this.value = '' };
field.onblur = function(){ this.value = defaultText };
}
Works, but I'm not a JS programmer, just tell me if that code is right.
Thanks.
Steve A. 13 Oct, 2008
I have it inside a div with a floated A and a SPAN and
the div has an overflow: auto; to clear the float and that seems
to make the generated ul invisible... Anyway I had to add heights to the A's so to remove the overflow property.
Cheers
sibel kuzgun 16 Dec, 2008
kyko 22 Dec, 2008
Evan 30 Dec, 2008
Gabriel 28 Jan, 2009
Thanks in advance!
Troy 8 Mar, 2009
if(i > "10") {break};
That will limit it to 10 items in the list. Modify as necessary.
Jérôme 11 Mar, 2009
thanks it is really great.
I was just wondering if it would be possible to add a parameter ton the searchfield JS function.
I would like to have defaultText as a parameter instead of a local variable, just for localization.
Any idea how to do it ?
anthony 31 Mar, 2009
Rafael R.P 28 Apr, 2009
thx
Rafael R.P 28 Apr, 2009
on the top of document do the sql source for recive data,
EX:
<?
header("Content-Type: text/html; charset=ISO-8859-1",true);
mysql_connect("localhost", "root", "");
mysql_select_db("database");
$sql = mysql_query("select field from table order by field asc");
while($x = mysql_fetch_assoc($sql)){
$suggestPHP = $suggestPHP . $x['field'] . ', ';
}
?>
on var suggest on your js write var suggest = '<?=$suggestPHP?>
Paul 5 May, 2009
I tried using your code to get the data from a mysql database but it doesn't work.
I get errors:
PHP Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource
and
PHP Notice: Undefined variable: suggestPHP
any ideas?
Cynthia 19 May, 2009
beermohamed 25 May, 2009
david 15 Jun, 2009
in the searchfield.js - if you replace the line:
if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
with the line:
if(arrSrc[i].indexOf(value.toLowerCase()) >= 0){
the script also searches for the searchterm in the wordlist.
for example:
var suggestionText = 'google, android';
if i type in "oo" it will now suggest me "google"
hope i made my point clear