VBBRett
asked on
JQuery Search Text and UI functionality
I was able to create a search box but as the user types, I wanted the user the ability to narrow down their search. So let's say that when the user starts typing, there are 100 records to be displayed, if a user types 3 or 4 letters to narrow down their search, I want only the filtered text to appear so maybe there would only be 10 or so records. Below is my code on pulling all of the records but as I type, the list doesn't change nor does it narrow down. How would I do this? Please view code below:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="ui-widget">
<form>
<input type="text" id="search" name="search" />
</form>
</div>
<script type="text/javascript">
$('#search').autocomplete({
source: function (request, response) {
$.ajax({
url: "http://195.129.8.190/Service/rest/Services/v1/departments",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.deptName,
id: item.deptId
};
}));
}
});
},
minLength: 3,
select: function (event, ui) {
$('#search').val(ui.item.deptName);
}
});
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER