Javascript 如何强制用户从自动完成列表中选择php和jquery

我有一个自动完成功能，它可以工作，并且数据可以被选择和显示。自动完成值的数据包含在.js文件中

我正在与两个问题作斗争：

如何防止用户选择数据文件中不包含的值。？例如，他们键入的值不在数据文件中。。。我不希望他们能够提交自己的数据。错误消息或错误占位符将非常棒

当用户键入值且“自动完成”检测到类似值并显示“自动完成”时，只能通过按键或鼠标单击来选择值。如何启用

选项卡

来选择值

这是我的密码：

HTML:

自动完成功能：

/*jslint  browser: true, white: true, plusplus: true */
/*global $, countries */

$(function () {


var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });

// Setup jQuery ajax mock:
$.mockjax({
    url: '*',
    responseTime: 2000,
    response: function (settings) {
        var query = settings.data.query,
            queryLowerCase = query.toLowerCase(),
            re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
            suggestions = $.grep(countriesArray, function (country) {
                 // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
                return re.test(country.value);
            }),
            response = {
                query: query,
                suggestions: suggestions
            };

        this.responseText = JSON.stringify(response);
    }
});

// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
    // serviceUrl: '/autosuggest/service/url',
    lookup: countriesArray,
    lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
        var re = new RegExp('\\b' +      $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
            return re.test(suggestion.value);
        },
        onHint: function (hint) {
            $('#autocomplete-ajax-x').val(hint);
        },
    });
});

---

我在Stackoverflow上搜索过类似的问题，但找不到解决方案

根据预期的数组验证已发布的字段。在psuedo代码中

function check_post($posted_output) {
    $valid_outputs_array = array("val1", "val2");

    if (in_array($poste_output, $valid_outputs_array)) {
        return true
    } else {
        return false
    }
}

出于UX原因，这应该在Clientside/js中完成，出于安全原因，应该在Serverside/PHP中完成

---

还有一些js库可以“强制”输出，但我手头上没有建议，在这个例子中，我还是会“滚动我自己的”。

谢谢@Joshua。我不是一个全职程序员，但我喜欢建立自己的项目。请您详细说明我需要在哪里插入您的代码好吗？编写的代码是针对服务器端的。因此，它将放在处理之前，如果为真，则处理它，如果为假，则“反弹”它。对于JS，您需要将其转换为JS，并将其作为自定义验证规则放在您正在使用的任何JS验证器中。

/*jslint  browser: true, white: true, plusplus: true */
/*global $, countries */

$(function () {


var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });

// Setup jQuery ajax mock:
$.mockjax({
    url: '*',
    responseTime: 2000,
    response: function (settings) {
        var query = settings.data.query,
            queryLowerCase = query.toLowerCase(),
            re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
            suggestions = $.grep(countriesArray, function (country) {
                 // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
                return re.test(country.value);
            }),
            response = {
                query: query,
                suggestions: suggestions
            };

        this.responseText = JSON.stringify(response);
    }
});

// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
    // serviceUrl: '/autosuggest/service/url',
    lookup: countriesArray,
    lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
        var re = new RegExp('\\b' +      $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
            return re.test(suggestion.value);
        },
        onHint: function (hint) {
            $('#autocomplete-ajax-x').val(hint);
        },
    });
});

function check_post($posted_output) {
    $valid_outputs_array = array("val1", "val2");

    if (in_array($poste_output, $valid_outputs_array)) {
        return true
    } else {
        return false
    }
}