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.
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of
dodot on 9 Jan, 2008 wrote:
SMASHINGAPPS.COM on 9 Jan, 2008 wrote:
Colin on 9 Jan, 2008 wrote:
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 on 9 Jan, 2008 wrote:
kyle on 10 Jan, 2008 wrote:
kyle on 10 Jan, 2008 wrote:
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 on 10 Jan, 2008 wrote:
cssglobe on 10 Jan, 2008 wrote:
Moz on 16 Jan, 2008 wrote:
hcabbos on 18 Jan, 2008 wrote:
ovi on 19 Jan, 2008 wrote:
ovi on 19 Jan, 2008 wrote:
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 on 26 Jan, 2008 wrote:
and now with german 'umlauts' please :-)
Dragon on 27 Jan, 2008 wrote:
cssglobe on 27 Jan, 2008 wrote:
Vectorpedia (Rick) on 28 Jan, 2008 wrote:
meyabilisim on 30 Jan, 2008 wrote:
Thomas on 21 Feb, 2008 wrote:
Cheers
cssglobe on 22 Feb, 2008 wrote:
ercan on 27 Feb, 2008 wrote:
line 179
for(var i=0;i<li.length;i++){
:(
Thomas on 3 Mar, 2008 wrote:
Cheers
Thomas on 3 Mar, 2008 wrote:
Cheers
Ledzep on 14 Mar, 2008 wrote:
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 on 14 Mar, 2008 wrote:
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 on 17 Mar, 2008 wrote:
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 on 25 Mar, 2008 wrote:
Alan Hogan on 9 Apr, 2008 wrote:
ven on 17 Apr, 2008 wrote:
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 on 17 Apr, 2008 wrote:
as I wanted to use it for retrieving live data?(coldfusion??)
Thanks
Gunter on 1 May, 2008 wrote:
convert umlaute with entities
example: ä - ä
hope it helps
gaby on 7 May, 2008 wrote:
Francisco on 13 May, 2008 wrote:
chester.. on 24 May, 2008 wrote:
http://www.css-lessons.ucoz.com/textbox-css-examples.htm
Orides Tomkiel on 30 May, 2008 wrote:
John on 31 May, 2008 wrote:
sezer on 31 May, 2008 wrote:
http://css-lessons.ucoz.com/css-parameters.htm
maggl on 5 Jun, 2008 wrote:
how to sort the var suggestionText? anyone an answer?
wwwcemil on 7 Jun, 2008 wrote:
MarK on 10 Jun, 2008 wrote:
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 on 12 Jun, 2008 wrote:
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 on 12 Jun, 2008 wrote:
create my own website/web page but i
dont know how to go about doing it so
can you please help me out
Kyrill on 8 Jul, 2008 wrote:
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 on 7 Aug, 2008 wrote:
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 on 7 Aug, 2008 wrote:
Mario on 8 Aug, 2008 wrote:
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. on 13 Oct, 2008 wrote:
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 on 16 Dec, 2008 wrote:
kyko on 22 Dec, 2008 wrote:
Evan on 30 Dec, 2008 wrote:
Gabriel on 28 Jan, 2009 wrote:
Thanks in advance!
Troy on 8 Mar, 2009 wrote:
if(i > "10") {break};
That will limit it to 10 items in the list. Modify as necessary.
Jérôme on 11 Mar, 2009 wrote:
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 on 31 Mar, 2009 wrote:
Rafael R.P on 28 Apr, 2009 wrote:
thx
Rafael R.P on 28 Apr, 2009 wrote:
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 on 5 May, 2009 wrote:
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 on 19 May, 2009 wrote:
beermohamed on 25 May, 2009 wrote:
david on 15 Jun, 2009 wrote:
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