Question

我有一个简单的自动完成测试，可以处理硬编码数据。

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

当我输入B时 - 显示香蕉但我不能输入“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;
}
});

所以这些字母：粗体“，”正常“，”默认“，”100“，”200“工作。但是

我将validOptions更改为：

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

它不能正常工作。

还有其他办法吗，或者你知道我哪里出错了。

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

SerialProdNumStockSiteAutoComplete code：

         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的替代

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

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

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

这不会影响硬编码数据，因为它只适用于搜索网址（您想要的）。

.keyup在搜索完成之前发生时无法正常工作：

当您使用硬编码数据时（根据小提琴），一切都很好，但是当您更改以便源是URL时，将通过自动完成调用URL（执行搜索）（可以通过查看网络来确认浏览器控制台） - 当.keyup立即发生（同样如此）时，这会花费很短的时间。您可以通过在操作中添加Thread.Sleep()以及在js中添加console.log来确认这一点。

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");
            }

.keyup事件替代方案

4 个答案: