How to create a dropdown in jQuery using autocomplete and force selection from list
In this example we created a drop down <SELECT> list by setting the minLength config to 0 and then check for the focus event to trigger a search that brings all the values for the autocomplete. In addition to that when you move away from the input field it compares the input text value to the list data for a match, otherwise just blanks out the field.There is no force selection config currently available in jQuery autocomplete feature.
  |
Source for the HTML page - index.html
<html>
<head>
<title>jQuery Drop Down using AutoComplete and minLength of 0</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<STYLE TYPE="text/css" media="all">
.ui-autocomplete {
position: absolute;
cursor: default;
height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
</STYLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<form id="jQueryAutocomplete">
<fieldset>
<legend>jQuery create Drop down using autocomplete</legend>
<p>
<label for="myDropDown">Just click to see:</label><br />
<input id="myDropDown" type="text" name="myDropDown" />
</p>
</fieldset>
</form>
</body>
</html>
Source for the JavaScript file using jQuery - app.js
$(document).ready(function() {
var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];
$("input#myDropDown").autocomplete({
minLength: 0,
source: source,
autoFocus: true,
scroll: true,
}).focus(function() {
$(this).autocomplete("search", "");
}).live("blur", function(event) {
var autocomplete = $(this).data("autocomplete");
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
autocomplete.widget().children(".ui-menu-item").each(function() {
//Check if each autocomplete item is a case-insensitive match on the input
var item = $(this).data("item.autocomplete");
if (matcher.test(item.label || item.value || item)) {
//There was a match, lets stop checking
autocomplete.selectedItem = item;
return;
}
});
//if there was a match trigger the select event on that match
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, {
item: autocomplete.selectedItem
});
//there was no match, clear the input
} else {
$(this).val('');
}
});
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.