Alex Rivera | Logout

How do I add a "search" button in a text input field?

Asked 2010-11-02T16:13:43.637
23

How do I create a similar “search” element to the one in this site?

enter image description here

If we view source, he has one textbox followed by a <span> tag.

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>

Where do I get a similar "magnifying glass" image?

Edit
Report

1 Answer

0

I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request. It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.

It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.

For instance:

$('#search-field').iconfield( {
    'image-url':   'imgs/search.png', // url of icon
    'icon-cursor': 'pointer'          // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
    $('#search-form').submit()
}

I would love to get some feedback on my work.

answered 2012-10-15T11:18:34.903

Your Answer