Link to home
Avatar of VBBRett
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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of kblau
kblau

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of VBBRett
VBBRett

ASKER

Thank you for the solution.