AutoComplete use with http response

Question

I need to create autocomplete input in MVC application to get data by $http request. after three later type request must be functioning and results should populate user to select their choice.

I used JqueryUI autocompleted. but It is only populating results while key press. I need popup results just after 3 latter typed (as soon as results come by http request).

here is my current code

<input id="vendorName" type="text" ng-model="test" ng-keyup="AutoCompleteVendorByName_KeyUpEvent(test)" ng-keydown="VendorFilter()" />    





$scope.AutoCompleteVendorByName_KeyUpEvent = function(nameString) {
    if (nameString.length == 3) {
       $http({
          url: "/DirectPayment/GetVendorsByPartialName",
          method: "POST",
          headers: {
             "accept": "application/json;odata=verbose",
             "content-Type": "application/json;odata=verbose"
          },
          data: JSON.stringify({
             name: nameString
          })
       }).success(function(data, status, headers, config) {
          $scope.listVendors = data;
          $scope.listVendorsName = $scope.listVendors.map(function(el) {
             return el.name;
          });
          $scope.VendorFilter();


       });
    }
 }

 $scope.VendorFilter = function() {
    if ($scope.listVendorsName.length > 0) {
       $("#vendorName").autocomplete({
          source: $scope.listVendorsName,
          minLength: 1
       });
    }
 }

Answer 1

您可以将minLength：1更改为minLength：3