Question

我有一个输入框。单击输入框时，将显示自动完成源中的所有项目。当用户选择一个项目时，输入框被正确填充。一切正常......但是我想要更多的东西，而我却无法看到如何做到这一点。我希望第一个输入框不能被用户编辑。目前，他可以手动输入值。如果我把readonly放在我的CSS中，输入就不再可点击了....所以我不知道怎么做。哦顺便说一句，在不想使用组合框。输入必须保持输入。非常感谢您提前回复。干杯。马克。

http://jsfiddle.net/DeJQB/2/

我的HTML：

<input type="text" id="my-input" />

我的js：

$(function() {
    var availableTags = [
            "00","15","30","45"
        ];
    $("#my-input").autocomplete({
        source: availableTags,
        minLength: 0
    }).click(function() {
        $(this).val("");
        $(this).autocomplete("search");
    });
});

Answer 1

您是否尝试过添加HTML readonly属性，而不是CSS？以下工作对我来说很好：

<input type="text" id="my-input" readonly="readonly" />

Answer 2

忽略按键？

$("#my-input").autocomplete({
    source: availableTags,
    minLength: 0
}).click(function() {
    $(this).val("");
    $(this).autocomplete("search");
}).keypress(function(event) {
    event.preventDefault();
});

在这里演示 - ＆gt; http://jsfiddle.net/DeJQB/3/

Answer 3

最佳解决方案

`

$('.tokenfield').on('tokenfield:createtoken', function (event) {
    var existingTokens = $(this).tokenfield('getTokens');
    $.each(existingTokens, function(index, token) {
        if (token.value === event.attrs.value)
            event.preventDefault();
    });
});

JQuery UI自动完成 - 如何使输入不被用户编辑

3 个答案: