jqueryオートコンプリートで検索が機能しない

Question

JQueryオートコンプリートを使用しています。データソースは動的です。文字（例：alex）で検索している間、すべてのデータを返します。私のコードは私が探しているものを正確なデータを表示する必要があり、

$('#autocomplete').autocomplete({ 
 
    position: { 
 
    my: "right top", 
 
    at: "right bottom" 
 
    }, 
 
    source: function(request, response) { 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: apiurl + "apiv2/getUsers", 
 
     data: { 
 
     cust_id: localStorage.getItem("cust_id"), 
 
     user_type: $("#to_role").val() 
 
     }, 
 
     success: function(data1) { 
 
     var parsedJson = $.parseJSON(data1); 
 
     response($.map(parsedJson.response.data, function(item) { 
 
      return { 
 
      label: item.name, 
 
      value: item.id 
 
      } 
 
     })); 
 
     } 
 
    }); 
 
    }, 
 
    select: function(event, ui) { 
 
    $('#searchval').val(ui.item.value); 
 
    $('#autocomplete').val(ui.item.label); 
 

 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
    focus: function(event, ui) { 
 
    $("#autocomplete").val(ui.item.label); 
 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
}); 
 
$('#autocomplete').on('autocompleteselect', function(e, ui) { 
 
    getUsersData(ui.item.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 

 
<input id="autocomplete" class="form-control" placeholder="Select User"> 
 
<input type="hidden" id="searchval" name="searchval" class="form-control">

です。これを解決するには？私を助けてください。これは、のように高価な実装が考えられます。ご使用のAPIサーバーは、フィルタオプションを持っていない場合は、事前

Answer 1

で

おかげで、あなたは、ローカル

if (!RegExp.escape) { 
 
    RegExp.escape = function(value) { 
 
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") 
 
    }; 
 
} 
 

 
//to mock the ajax response 
 
var parsedJson = { 
 
    response: { 
 
    data: [{ 
 
     id: 1, 
 
     name: 'Abc' 
 
    }, { 
 
     id: 2, 
 
     name: 'cde' 
 
    }, { 
 
     id: 3, 
 
     name: 'efg' 
 
    }, { 
 
     id: 4, 
 
     name: 'ghi' 
 
    }, { 
 
     id: 5, 
 
     name: 'jkl' 
 
    }, { 
 
     id: 6, 
 
     name: 'aFZ' 
 
    }] 
 
    } 
 
} 
 

 
$('#autocomplete').autocomplete({ 
 
    position: { 
 
    my: "right top", 
 
    at: "right bottom" 
 
    }, 
 
    source: function(request, response) { 
 

 
    //replace the contents of the ajax success handler to do local filter 
 
    var regex = new RegExp(RegExp.escape(request.term), "i"); 
 
    var recs = $.grep(parsedJson.response.data, function(obj) { 
 
     return regex.test(obj.name) 
 
    }); 
 
    response($.map(recs, function(item) { 
 
     return { 
 
     label: item.name, 
 
     value: item.id 
 
     } 
 
    })); 
 

 

 
    }, 
 
    select: function(event, ui) { 
 
    $('#searchval').val(ui.item.value); 
 
    $('#autocomplete').val(ui.item.label); 
 

 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
    focus: function(event, ui) { 
 
    $("#autocomplete").val(ui.item.label); 
 
    return false; // Prevent the widget from inserting the value. 
 
    }, 
 
});

<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 

 
<input id="autocomplete" class="form-control" placeholder="Select User"> 
 
<input type="hidden" id="searchval" name="searchval" class="form-control">

注意をそれを実装する必要がありますすべてのコンテンツをすべてのイベントで取得している場合は、ローカルでajaxレスポンスのレスポンスをローカルにキャッシュして、パフォーマンスを向上させることができます。