jQuery UI 自动完成:强制从列表中选择而无需修改 [英] jQuery UI autocomplete: enforce selection from list without modifications

问题描述

我正在使用 使用 Knockout JS 模板/JQuery 的自动完成组合框

我需要强制用户必须在自动完成列表中选择一个值，并且在他们选择该值后无法向选择添加其他文本.我进行了搜索，但找不到有关如何防止输入其他文本的示例.如果他们选择了错误的下拉列表，但他们键入的内容必须与列表中的值 100% 匹配，它必须保持可编辑状态.

我在 jquery 上发现了 this9 个月大了，没有人发布答案.

解决方案

没有内置函数来做你想做的事.

我做了一个简单的项目，其中使用自动完成change 事件，您必须从自动完成中选择值，否则将删除该值.

更改事件

<块引用>

当字段模糊时触发，如果值发生变化.

选择后该字段被禁用，您可以使用激活锚点(例如)激活它.

代码:

$("#artist").autocomplete({来源:功能(请求，响应){$.ajax({网址:http://en.wikipedia.org/w/api.php"，数据类型:jsonp"，数据: {'action': "opensearch",'格式': "json",搜索":request.term},成功:功能(数据){响应(数据[1])；}});},更改:功能(事件，用户界面){if (ui.item == null || ui.item == undefined) {$("#artist").val("");$("#artist").attr("disabled", false);} 别的 {$("#artist").attr("disabled", true);}}});$('#changeArtist').click(function (e) {e.preventDefault();$("#artist").attr("disabled", false);});

这是一个小提琴:http://jsfiddle.net/IrvinDominin/nH4Nx/>

I am using the custom binding provided in Autocomplete combobox with Knockout JS template / JQuery

I need to enforce that the user must select a value in the autocomplete list and after they select the value to not be able to add additional text to the select. I have searched but I cannot find an example of how to prevent additional text from being entered. It must stay editable incase they selected the wrong drop down but what they type must match 100% with a value from the list.

I found this posting on jquery but its 9 months old and no one posted an answer.

解决方案

There is no built in function to do what you want.

I made a simple project where using the autocomplete change event you must select the value from the autocomplete, if not the value is deleted.

Change event

Triggered when the field is blurred, if the value has changed.

After the selection the field became disabled, and you can activate it using an activating anchor (for example).

Code:

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

Here is a fiddle: http://jsfiddle.net/IrvinDominin/nH4Nx/

这篇关于jQuery UI 自动完成:强制从列表中选择而无需修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！