Saturday, 28 January 2017

How to autocomplete text box by ajax with filtering in mvc?

<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="textjavascript">
    function changeSourceType(obj) {
        debugger;
        var sourceData = [];
        var sourcetype = document.getElementById("ddlSourceType" + obj).value;
        $("#txtSource" + obj).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Layout/FillSource',
                    type: "GET",
                    dataType: "JSON",
                    data: { sourcetype: sourcetype },
                    success: function(data) {
                        var array = $.map(data, function(item) {
                            return {
                                label: item.Name,
                                value: item.Name
                            };
                        });
                        //call the filter here
                        response($.ui.autocomplete.filter(array, request.term));
                    }
                });
            },
            minLength: 0,
            focus: function (event, ui) {
                $("#txtSource" + obj).val(ui.item.label);
            }
        });
    }
</script>

<div class="col-md-3">
    <label class="" for="form-first-name">Source Type</label>
       <div class="clearfix">
           <select id="ddlSourceType" class="form-control" onchange="changeSourceType()">
                 <option value="0">Select</option>
                  <option value="1">Content</option>
                   <option value="2">Folder</option>
                   <option value="3">Taxonomy</option>
            </select>
      </div>
 </div>

 <div class="col-md-3">
       <label class="" for="form-first-name">Select Source</label>
          <div class="clearfix">
               <input type="text" id="txtSource1" class="form-control">
           </div>
 </div>

AutoComplete Link -: https://jqueryui.com/autocomplete/

No comments:

Post a Comment