jQuery UI自動完成：從列表中強制執行選擇而不進行任何修改

Question

我正在使用Autocomplete組合框中提供的自定義綁定和Knockout JS模板/ JQuery

我需要強制用戶必須在自動完成列表中選擇一個值，然后選擇該值以便無法向select中添加其他文本。 我搜索過，但找不到如何防止輸入其他文本的示例。 它必須保持可編輯狀態，只要他們選擇了錯誤的下拉菜單，但他們輸入的內容必須與列表中的值匹配100％。

我在jquery上發現了這個帖子，但它已經9個月了，沒人發布答案。

Answer 1

沒有內置功能可以做你想要的。

我做了一個簡單的項目，使用自動完成change事件，您必須從自動完成中選擇值，如果沒有刪除該值。

改變事件

如果字段模糊，則觸發，如果值已更改。

選擇后，該字段將被禁用，您可以使用激活錨點（例如）激活它。

碼：

$("#artist").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://en.wikipedia.org/w/api.php",
            dataType: "jsonp",
            data: {
                'action': "opensearch",
                    'format': "json",
                    'search': request.term
            },
            success: function (data) {
                response(data[1]);
            }
        });
    },
    change: function (event, ui) {
        if (ui.item == null || ui.item == undefined) {
            $("#artist").val("");
            $("#artist").attr("disabled", false);
        } else {
            $("#artist").attr("disabled", true);
        }
    }
});

$('#changeArtist').click(function (e) {
    e.preventDefault();
    $("#artist").attr("disabled", false);
});

這是一個小提琴： http ： //jsfiddle.net/IrvinDominin/nH4Nx/

Answer 2

這是一個較舊的帖子，但是我認為從UX的角度來看，由於焦點問題（從焦點被從輸入中移除，在這種情況下'#artist'，相當煩人），它不會進行更改，因此它有點不完整，所以我想補充一下：

   select: function (event, ui) {
        $("#artist").attr("disabled", false);
    }

所以（我們假設它是我們試圖啟用的按鈕）用戶在選擇后立即看到啟用的對象。