通过 ajax 在自动完成查询中发送附加参数

Question

自动完成代码有效，但我无法使用实际搜索值过滤输出（耳语记录），因为该参数（d.queryString）不在 ajax 请求中。

我有这个代码， 文本框

<input type="text" name="CustomerNumber" value="@if (@ViewBag.CustomerNumber != null){@ViewBag.CustomerNumber}" />

Jquery 脚本

<script type="text/javascript">

    $(document).ready(function () {

        $("input[name='CustomerNumber']").autocomplete({
            source: function (request, response) {
                $.ajax({
                    dataType: "json",
                    type: 'GET',
                    url: '@Url.Action("GetCustomerNames")',
                    data: function (d) {
                        d.queryString = $("input[name='CustomerNumber']").val()
                    },
                    success: function (data) {
                        // assuming data is a JavaScript array such as
                        // ["one@abc.de", "onf@abc.de","ong@abc.de"]
                        // and not a string
                        response(data);
                    }
                });
            },
            minLength: 3
        });

    });

</script>

.NET 控制器

   public JsonResult GetCustomerNames(string searchQuery)
            {
                var autocompleteList = new List<string>();
                using (var db = new DB.APPDBContext())
                {
                    autocompleteList = db.GetAutocompleteList(1, searchQuery).ToList();
                }

                return Json(autocompleteList, JsonRequestBehavior.AllowGet);
            }

如果我键入 3 个字母，我会将所有（未过滤的）记录发送给耳语者，因为参数 queryString（实际文本框值）不会发送到控制器。为什么 ajax 请求中缺少 queryString 参数？

谢谢你的想法

Answer 1

1) 创建一个包含文本框内容的对象：

 var queryString = {        
    searchQuery: $("input[name='CustomerNumber']").val()
 }

2) 然后使用$.param创建一个URL来生成查询字符串：

var url = "@Url.Action("GetCustomerNames")?" + $.param(queryString);

3) 使用在您的 Ajax 方法中生成的 URL：

$("input[name='CustomerNumber']").autocomplete({
        source: function (request, response) {
            $.ajax({
                dataType: "json",
                type: 'GET',
                url: url,
                success: function (data) {
                    // assuming data is a JavaScript array such as
                    // ["one@abc.de", "onf@abc.de","ong@abc.de"]
                    // and not a string
                    response(data);
                }
            });
        },
        minLength: 3
    });

通过 ajax 在自动完成查询中发送附加参数

Sending additional parameter in autocomplete query via ajax

jquery

asp.net-mvc

jquery-ui

jquery-ui-autocomplete