.keyup 事件替代

Question

我有一个简单的自动完成测试，它适用于硬编码数据。

但是，当我添加自己的数据（其中包含超过 1000 个数据）时，它不起作用并且只显示第一个字母，所以如果我的数据是“Apple”

当我输入 B - 它显示 Banana 但我无法输入“BA”，因为“A”消失了。

我期待我能写出整个单词而不是第一个字母。

这是工作代码：

 var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";

$('#ac').autocomplete({
autoFocus: true,
source: validOptions
})
.keyup(function() {
var isValid = false;
for (i in validOptions) {
    if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
        isValid = true;
    }
    }
    if (!isValid) {
     this.value = previousValue
} else {
    previousValue = this.value;
}
});

所以这些字母：Bold"、"Normal"、"Default"、"100"、"200" 有效。但是

只要我将 validOptions 更改为：

var validOptions ='@Url.Action("SerialProdNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=' + $("#Form_Prod_Num").val();

它不能正常工作。

有没有其他方法可以做到这一点，或者你知道我哪里出错了。

这个问题是关于 .keyup 的替代品

SerialProdNumStockSiteAutoComplete 代码：

         public JsonResult SerialProdNumStockSiteAutoComplete(string term,string stocksitenum,string model)
    {
        return Json(AutoComplete.DeviceFromStockSite(term, stocksitenum, model), JsonRequestBehavior.AllowGet);
    }

库存设备：

 public static List<string> DeviceFromStockSite(string term, string stocksitenum, string model)
    {
        //devices will always come from serialised stock
        var qryStock =
            SC42Ctx.SPNlocs
                .Where(x => x.Nloc_Site_Num.StartsWith(stocksitenum)
                            && x.Nloc_Part_Num == model
                            && x.Nloc_Ord_Num == null)
                .Select(
                    s =>
                        new TicketSerialNumber
                        {
                            SerialNumber = s.Nloc_ID_Num,
                            Source = stocksitenum,
                            Call = s.Nloc_Ord_Num.ToString()
                        })
                .ToList();

当我复制显示的 URL 时：

http://localhost:58172/Ajax/SerialProdNumStockSiteAutoComplete?stocksitenum=LW&model=MP4000BADP&term=4&_=1433235435372

这是我输入 4 并且无法添加任何其他内容的时候

Answer 1

Try using the minLength option of autocomplete to specify the minimum number of characters: 

$('#ac').autocomplete({
autoFocus: true,
source: validOptions,
minLength: 3
})
.keyup(function() {
var isValid = false;
for (i in validOptions) {
    if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
        isValid = true;
    }
    }
    if (!isValid) {
     this.value = previousValue
} else {
    previousValue = this.value;
}
});

Answer 2

这段代码是罪魁祸首：

 if (!isValid) {
     this.value = previousValue
} else {
    previousValue = this.value;
}

它说的是值不匹配然后它不会让你输入那个值。

将您的代码更新为：

$(document).ready(function () {
    var validOptions = ["Bold", "Normal", "Default", "100", "200"]
    previousValue = "";

    $('#ac').autocomplete({
        autoFocus: true,
        source: validOptions
    })
        .keyup(function () {
        var isValid = false;
        for (i in validOptions) {
            if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
                isValid = true;
            }
        }

    });
});

Answer 3

.keyup 的替代方法

当用户输入自动完成数据以外的内容时显示错误

您似乎想使用 Response 事件http://api.jqueryui.com/autocomplete/#event-response。

在搜索完成后、菜单显示之前触发。对建议数据的本地操作很有用...此事件总是在搜索完成时触发，即使由于没有结果而不会显示菜单...

这不适用于硬编码数据，因为它仅适用于使用 URL 进行搜索（您想要的）。

.keyup 不起作用，因为它发生在搜索完成之前：

当您使用硬编码数据（按照小提琴）时，一切都很好，但是当您更改源是 URL 时，会通过自动完成调用 URL（执行搜索）（可以通过在浏览器控制台） - 这需要很短的异步时间，而 .keyup 立即发生（同样好）。您可以通过在您的操作中添加Thread.Sleep() 并在js 中添加各种console.logs 来确认这一点。

Answer 4

没错，我找到了答案

简单的：

var source = validOptions;
            var found = $('.ui-autocomplete li').text().search(source);
            console.debug('found:' + found);
            if (found < 0) {
                $(this).val('');
                alert("please select from auto complete");
            }