Suppose I have simple drop-down list - (http://jsfiddle.net/J52s9/). Here for this drop-down list How i can have a search option.
For example if in the textbox user writes Weeks the drop-down list having week as a part of string should only appear .
I am using php.
I tired-
<html>
<head>
</head>
<body>
<select name="dateRange" id="mySelect" size="1">
<option value > Select Duration </option>
<option value="A">Last 24 Hours</option>
<option value="B">Last 2 Days</option>
<option value="C">Last Week</option>
<option value="D">Last 2 Weeks</option>
<option value="E">Last Month</option>
<option value="F">Last 3 Months</option>
<option value="G">Last 6 Months</option>
<option value="H">Last Year</option>
</select>
</form>
</body>
</html>
$(document).ready(function() { $('select').chosen(); });
Please guide. Thanks in advance !
chosen is a nice jQuery plugin for that
$('select').chosen();
updated jsfiddle: http://jsfiddle.net/J52s9/2/
You can use html5 datalist element to do as per your requirement. Check if this is what you need:
Copy the following in an html file.
<!DOCTYPE html> <html> <head> </head> <body> <label>Search</label> <input list='mySelect'> <datalist name="dateRange" id="mySelect" size="1"> <option value > Select Duration </option> <option value="A">Last 24 Hours</option> <option value="B">Last 2 Days</option> <option value="C">Last Week</option> <option value="D">Last 2 Weeks</option> <option value="E">Last Month</option> <option value="F">Last 3 Months</option> <option value="G">Last 6 Months</option> <option value="H">Last Year</option> </datalist> </form> </body> </html>