I am working on a system that makes use of a form to enter some data into a database. The system works as expected except for an issue with the display of the form after it has been submitted. When the form is submitted the page reloads and will show the info submitted as placeholder text inside of the form fields, and the "Save Changes" button will display as "Changes Saved!" for a few seconds. However, some of the input fields width property gets altered as well. Specifically my half-width form elements.
The width for these elements is defined as width: calc(50% - 24px), which is 265px. Additionally, there is a 5px padding and 2px border for these elements. This comes out to a total width of 279px, as expected. However, when the form is submitted and the page is reloaded the total width of the element comes out as 265px, retaining the 5px padding and 2px border, but dropping the internal width to 251px. Nowhere in my code is there anything that changes the width ever, and checking with dev tools shows that the width, padding, and border I defined are still there. This has the rather annoying effect of shifting both elements over after the form is submitted. Navigating to another page and back resolves the issue.
I have tried using !important and have checked over all of the code (JavaScript) echoed out from PHP when the submission is successful that interacts with the form in a capacity for changing things, and nothing should have this impact. I only change the color and text of the submit button.
Any help would be greatly appreciated!
Edit 1:
The code below is a snippet of the entire form, excluding the PHP. I have modified the code so that clicking save changes does not submit the form but will show the change for the submit button, as otherwise submitting makes the form vanish. The error does not occur in the snippet of code however as a result of not "reloading" the page.
function success() {
var button = document.getElementById('clientInfoBtn');
var normalColor = button.style.backgroundColor;
var normalValue = button.value;
button.style.backgroundColor = '#33cc33';
button.value = 'Changes Saved!';
setTimeout(function() {
button.style.backgroundColor = normalColor;
button.value = normalValue;
}, 3000);
return false;
}
.standardFormBox {
margin-bottom: 20px;
width: 600px;
}
.standardFormBoxInner {
border: 1px solid silver;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.standardFormHeading {
font-family: "Helvetica";
font-size: 16pt;
color: white;
background-color: #1975FF;
margin: 0;
padding: 10px;
}
.standardFormBtn {
color: white;
font-size: 14pt;
background-color: #1975FF;
border: none;
padding: 10px 10px;
margin-bottom: 15px;
}
.standardFormBtn:hover {
cursor: pointer;
background-color: #0052cc;
}
.standardFormInput {
font-size: 14pt;
font-family: "Trebuchet MS";
margin-bottom: 10px;
padding: 5px;
}
.sfiMultiLabel {
font-size: 14pt;
font-family: "Trebuchet MS";
}
.sfiHalf {
width: calc(50% - 24px);
}
.sfiText {
font-size: 14pt;
margin: 0;
}
.sfiTextHalf {
width: calc(50% - 10px);
}
.sfiTextFull {
width: 100%;
}
.sfiFull {
width: 100%;
}
.sfiLeft {
margin-right: 20px;
}
<form name="accountInfoForm" method="POST">
<div class="standardFormBox">
<p class="standardFormHeading">Business Billing Information</p>
<div class="standardFormBoxInner">
<p class="sfiText sfiTextHalf">Business Name</p>
<input type="text" name="cBusiness" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Name On Bank Account</p>
<input type="text" name="cName" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Billing Email</p>
<input type="email" name="cEmail" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Street Address</p>
<input type="text" name="cStreet" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">City</p>
<input type="text" name="cCity" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiLeft sfiTextHalf">State</p>
<p class="sfiText sfiTextHalf">ZIP</p>
<input type="text" name="cState" placeholder="" class="standardFormInput sfiLeft sfiHalf">
<input type="text" name="cZip" placeholder="" class="standardFormInput sfiHalf">
<p class="sfiText sfiTextHalf">Phone Number</p>
<input type="text" name="cPhone" placeholder="" class="standardFormInput sfiFull">
</div>
</div>
<input type="submit" name="clientChangeInfo" value="Save Changes" class="standardFormBtn" id="clientInfoBtn" onclick="return success()">
</form>
I have this input :
<input type="number" class="textfield numberField font" name="Price" placeholder="Price"><br>
So the text place holder is price.
When user start typing I would like to keep the word price.
So if he types 65 he will see on the input :
Price 65
Do I need to create another div inside for the word price, or can it be done using js or html ?
I think you want to be like that.
.full-input {
display: inline-block;
padding: 3px;
border: 2px solid blue;
}
input {
outline: none;
border: none;
display: inline-block;
line-height: 1.2em;
font-size: 14pt;
}
label {
display: inline-block;
font-size: 12px;
color: blue;
}
<div class='full-input'><label for='price'>Price</label>
<input type='number'class="textfield numberField font" name="Price">
</div>
One way would be to check if the value is equal to an empty string, and if so, manually set the value to Price. Note that this will require removing the type="number" restriction.
document.getElementsByTagName('input')[0].onkeydown = function() {
if (this.value == '') {
this.value = "Price ";
}
}
<input class="textfield numberField font" name="Price" placeholder="Price">
If you only want to allow numbers, then you could add a pattern validation of something like pattern="Price [0-9]":
document.getElementsByTagName('input')[0].onkeydown = function() {
if (this.value == '') {
this.value = "Price ";
}
}
<form>
<input class="textfield numberField font" name="Price" placeholder="Price" pattern="Price [0-9]">
<input type="submit">
</form>
Keep in mind that both approaches would have the word Price in the value (which may be unintended). Creating a <label> may be more appropriate for your situation.
You may try this:
.textfield.labeled>.label {
flex: 0 0 auto;
margin: 0;
font-size: 14px;
}
.textfield.labeled .label:first-child+input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: transparent;
}
.textfield.labeled>input {
padding-left: 3px;
border: 1px solid rgba(34,36,38,.15);
box-shadow: none;
}
.textfield.labeled {
display: inline-flex;
color: rgba(0,0,0,.87);
}
.label {
display: inline-block;
background-color: #e8e8e8;
padding: 2px 5px;
color: rgba(0,0,0,.6);
font-weight: bold;
}
<div class="textfield labeled">
<div class="label">
Price
</div>
<input type="number" class="textfield numberField font" name="Price" placeholder="Price">
</div>
I have a div I would like to show when a customer enters into a form. I originally though a z-index solution would fix this but a display/show option seems better.
However, it doesn't seem to work. Can this be shortened or done in a better way?
$(document).ready(function(){
if ($("input#poundprice").text().length > 0) {
$('.pence-sign').show();
//$('.pence-sign').addClass('display:block;');
}
});
Here is the JSFiddle
You need to be checking for when something is actually typed into the box. What you are currently doing only runs once when the page loads.
$(document).ready(function(){
$("#poundprice").on("change keydown paste",function(e) {
$('.pence-sign').show();
});
$("button").click(function(e){
e.preventDefault();
});
});
.pence-sign {
position: absolute;
top: 23%;
left: 30%;
text-transform: lowercase;
font-family: arial;
display: none;
}
input, button {
appearance: none;
border: none;
font-size: inherit;
background: #eee;
border-radius: 3px;
padding: 1rem;
width: 100%;
max-width: 280px;
margin-bottom:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="position:relative">
<div class="poundinput" style="position:relative;">
<p class="pence-sign">pence</p>
<input id="poundprice" name="price" type="currency" placeholder="Enter p value" required="">
</div>
<button type="submit">Submit</button>
</form>
I have this huge form I'm making and there's an also huge problem with it.
In some "areas". only the last input works.
For example here:
[...]
<div class="main_data">
<span class="info">main data</span><br>
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="website" placeholder="Website" required>
<input type="text" name="telephone" placeholder="Telephone" required>
<input type="text" name="address" placeholder="Address" required>
<input type="text" name="city" placeholder="City" required>
<input type="text" name="country" placeholder="Country" required>
</div>
[...]
Every input appears to be disabled(?) and I can only write on Country.
This also happens on some other areas of the form, for example here:
[...]
<div class="detailed_info">
<span class="info">detailed info</span>
<input type="text" name="activity_areas" placeholder="Activity Areas" required>
<input type="text" name="company_valences" placeholder="Description of Company Valences" required>
<input type="text" name="where_operates" placeholder="Markets / Countries where it operates" required>
<input type="text" name="where_operates" placeholder="Annual Turnover (Value EUR)" required>
[...]
I can only write on Annual Turnover.
I tried switching z-index's to check out if it was something over it but I didn't find anything wrong.
I'll paste the css of only the first part, I belive if I find what's happening on the first one I'll be able to correct the second.
.main_data{
width: 100%;
padding: 30px 0;
background: rgba(238, 238, 238, 0.9);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
text-align: center;
}
.main_data .info{
display: block;
width: 100%;
margin: 0 0 10px 0;
font-size: 20px;
font-family: 'Futura-Light-Italic', sans-serif;
}
.main_data input{
border: 0;
padding: 5px 0;
margin: 0;
width: 80%;
background: #FFF;
color: #000;
text-align: center;
font-family: 'Futura', sans-serif;
}
.main_data input:focus{
border: 0;
}
I'm still afraid that it might not have nothing to do with the form so I'll leave you guys a link to the page so can try inspecting some elements if you want.
To bring up the form you click Join the City as One of Us: link
I'm really needing help as this form must be ready today.
Please ask questions if you don't understand something! I will obviously try to help you helping me.
EDIT: I'm using Google Chrome
Change the line-height on .oneofus.
.oneofus {
width: 88%;
position: absolute;
z-index: 12;
top: 0;
line-height: 1px; /* this is the problem remove it or make it bigger (74px or more) */
}
Set the position of the inputs to relative..
.main_data input {
position: relative;
}
Is there a quick way to create an input text element with an icon on the right to clear the input element itself (like the google search box)?
I looked around but I only found how to put an icon as background of the input element. Is there a jQuery plugin or something else?
I want the icon inside the input text element, something like:
--------------------------------------------------
| X|
--------------------------------------------------
Add a type="search" to your input
The support is pretty decent but will not work in IE<10
<input type="search">
Older browsers
If you need IE9 support here are some workarounds
Using a standard <input type="text"> and some HTML elements:
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Using only a <input class="clearable" type="text"> (No additional elements)
set a class="clearable" and play with it's background image:
/**
* Clearable text inputs
*/
function tog(v){return v ? "addClass" : "removeClass";}
$(document).on("input", ".clearable", function(){
$(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function( ev ){
ev.preventDefault();
$(this).removeClass("x onX").val("").change();
});
// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/*
Clearable text inputs
*/
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center).
That 18px padding will prevent the text hide underneath the icon (while visible).
jQuery will add the class "x" (if input has value) showing the clear icon.
Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX.
Clicking the onX class removes all classes, resets the input value and hides the icon.
7x7px gif:
Base64 string:
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
Could I suggest, if you're okay with this being limited to html 5 compliant browsers, simply using:
<input type="search" />
JS Fiddle demo
Admittedly, in Chromium (Ubuntu 11.04), this does require there to be text inside the input element before the clear-text image/functionality will appear.
Reference:
Dive Into HTML 5: A form of Madness.
input type=search - search field (NEW) HTML5.
According to MDN, <input type="search" /> is currently supported in all modern browsers:
<input type="search" value="Clear this." />
However, if you want different behavior that is consistent across browsers here are some light-weight alternatives that only require JavaScript:
Option 1 - Always display the 'x': (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Always display the 'x':</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 2 - Only display the 'x' when hovering over the field: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' when hovering over the field:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 3 - Only display the 'x' if the input element has a value: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
var input = el.querySelector('input');
conditionallyHideClearIcon();
input.addEventListener('input', conditionallyHideClearIcon);
el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
input.value = '';
conditionallyHideClearIcon();
});
function conditionallyHideClearIcon(e) {
var target = (e && e.target) || input;
target.nextElementSibling.style.display = target.value ? 'block' : 'none';
}
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' if the `input` element has a value:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
You could use a reset button styled with an image...
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
See it in action here: http://jsbin.com/uloli3/63
I've created a clearable textbox in just CSS. It requires no javascript code to make it work
below is the demo link
http://codepen.io/shidhincr/pen/ICLBD
Since none of the solutions flying around really met our requirements, we came up with a simple jQuery plugin called jQuery-ClearSearch -
using it is as easy as:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example: http://jsfiddle.net/wldaunfr/FERw3/
If you want it like Google, then you should know that the "X" isn't actually inside the <input> -- they're next to each other with the outer container styled to appear like the text box.
HTML:
<form>
<span class="x-input">
<input type="text" class="x-input-text" />
<input type="reset" />
</span>
</form>
CSS:
.x-input {
border: 1px solid #ccc;
}
.x-input input.x-input-text {
border: 0;
outline: 0;
}
Example: http://jsfiddle.net/VTvNX/
Change the text box type as 'search' in the design mode or
<input type="search">
EDIT: I found this link. Hope it helps. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
You have mentioned you want it on the right of the input text. So, the best way would be to create an image next to the input box. If you are looking something inside the box, you can use background image but you may not be able to write a script to clear the box.
So, insert and image and write a JavaScript code to clear the textbox.
Use simple absolute positioning - it's not that hard.
jQuery:
$('span').click(function(){
$('input', $(this).parent()).val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
Vanilla JS:
var spans = document.getElementsByTagName("span");
function clickListener(e) {
e.target.parentElement.getElementsByTagName("input")[0].value = "";
}
for (let i = 0; i < spans.length; i++) {
spans[i].addEventListener("click", clickListener);
}
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
jQuery Mobile now has this built in:
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
Jquery Mobile API TextInput docs
Something like this??
Jsfiddle Demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.searchinput{
display:inline-block;vertical-align: bottom;
width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
outline: none;
}
.clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
width: 20px;
transition: max-width 0.3s;overflow: hidden;float: right;
display: block;max-width: 0px;
}
.show {
cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}
</style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">✗</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
$('input.searchinput').val('').focus();
$(".clear").removeClass("show");
});
});
</script>
</body>
</html>
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
You can do with this commands (without Bootstrap).
Array.from(document.querySelectorAll('.search-field')).forEach(field => {
field.querySelector('span').addEventListener('click', e => {
field.querySelector('input').value = '';
});
});
:root {
--theme-color: teal;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
div {
position: relative;
}
input {
background:none;
outline:none;
display: inline-block;
width: 100%;
margin: 8px 0;
padding: 13px 15px;
padding-right: 42.5px;
border: 1px solid var(--theme-color);
border-radius: 5px;
box-sizing: border-box;
}
span {
position: absolute;
top: 0;
right: 0;
margin: 8px 0;
padding: 13px 15px;
color: var(--theme-color);
font-weight: bold;
cursor: pointer;
}
span:after {
content: '\2716';
}
<div class="wrapper">
<div class="search-field">
<input placeholder="Search..." />
<span></span>
</div>
</div>
Here's a jQuery plugin (and a demo at the end).
http://jsfiddle.net/e4qhW/3/
I did it mostly to illustrate an example (and a personal challenge). Although upvotes are welcome, the other answers are well handed out on time and deserve their due recognition.
Still, in my opinion, it is over-engineered bloat (unless it makes part of a UI library).
I have written a simple component using jQuery and bootstrap.
Give it a try: https://github.com/mahpour/bootstrap-input-clear-button
Using a jquery plugin I have adapted it to my needs adding customized options and creating a new plugin. You can find it here:
https://github.com/david-dlc-cerezo/jquery-clearField
An example of a simple usage:
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">
<table>
<tr>
<td><input name="test1" id="test1" clas="test" type='text'></td>
<td>Empty</td>
</tr>
<tr>
<td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
<td>Not empty</td>
</tr>
</table>
<script>
$('.test').clearField();
</script>
Obtaining something like this:
No need to include CSS or image files. No need to include that whole heavy-artillery jQuery UI library. I wrote a lightweight jQuery plugin that does the magic for you. All you need is jQuery and the plugin. =)
Fiddle here: jQuery InputSearch demo.