如何有选择地禁用 jquery ui 自动完成功能？答案

【问题标题】：How to selectively disable jquery ui autocomplete?如何有选择地禁用 jquery ui 自动完成功能？
【发布时间】：2013-04-05 04:58:43
【问题描述】：

我确信有一个简单的解决方案，但我似乎找不到它。我正在使用 jquery ui 自动完成进行数据库搜索。自动完成会建议数据库中存在的单词/短语，以帮助用户构建更好的搜索查询。我有一个选择字段，可以更改自动完成的源以搜索不同的表，这一切都很好。

但是对于选择的选项之一，我需要禁用自动完成功能，将文本字段返回到普通的普通文本字段功能。我在想我可以将它包装在 select.change 函数中的 if 语句中，但这会导致各种意外行为 - 如果改回不同的选项，则自动完成功能不起作用。

这方面最好的方法是什么？

    $(function() {
        var select = $( "#selectType" ),
        options = select.find( "option" ),
        songSearchField = $( "#songSearchField" );

        var selectType = options.filter( ":selected" ).attr( "value" );

        songSearchField.autocomplete({
            source: "/ajax/songLookup.php?selectType=" + selectType,
            minLength: 2,
            select: function(e, ui) {  
                e.preventDefault()
                var searchTerm = ui.item.value;
                var existingTerms = $("#searchString").val() + searchTerm + ", ";
                $("#searchString").val(existingTerms);
                $(this).val('');
                },
            change: function() {
                // clear the search field
                $("#songSearchField").val('');
                }
        });

        $("#songSearchField").on( "autocompleteclose", function(e, ui) {
            var existingTerms = $("#searchString").val();
            $("#termsDisplay").html("<b>Terms: </b>" + existingTerms);
        });

        select.change(function () {
            $('#searchString').val('');
            $("#songSearchField").val('');
            $("#termsDisplay").html('');
            $("#content").html('');
            selectType = options.filter( ":selected" ).attr( "value" );
            songSearchField.autocomplete( "option", "source", "/ajax/songLookup.php?selectType=" + selectType );

            //// this is where I run into trouble \\\\
            if(selectType = 'desc') {
                songSearchField.autocomplete( "disable" );
            }
            else {
                songSearchField.autocomplete( "option", "source", "/ajax/songLookup.php?selectType=" + selectType );
            }
        });
    });

这是 HTML。

    <form id="songSearchForm">
        <input type="text" name="songSearchField" id="songSearchField" /><br />
        <select name="selectType" id="selectType">
            <option value="keyword">Keyword Search</option>
            <option value="desc">Song Description Search</option>
            <option value="title">Song Title Search</option>
        </select>
        <input type="hidden" name="searchString" id="searchString" value="" />
        <p id="termsDisplay"></p>
        <input type="submit" name="submit" value="Search" />
        <input type="button" name="clear" id="clear" value="Clear Search" />
    </form>

【问题讨论】：

如何使用两种不同的输入 - 普通输入并包裹在 autocomplete 中，根据选择的选项切换它们的可见性？
您不希望它为哪个选项工作？
我找到了解决方案（除了 Loren 指出的明显错字）。禁用自动完成后，您必须先在 else 语句中发送启用选项。

标签： jquery user-interface autocomplete

【解决方案1】：

两件事：

if(selectType = 'desc') {

应该是

if(selectType == 'desc') {

另外，我看到您在哪里禁用了自动完成功能，但我没有看到您在哪里重新启用它。试试这个：

if(selectType == 'desc') {
    songSearchField.autocomplete( "disable" );
} else {
    songSearchField.autocomplete( "enable" );
    songSearchField.autocomplete( "option", "source", "/ajax/songLookup.php?selectType=" + selectType );
}

编辑 - 我最初删除了该行以更改源代码，但乍一看，我认为您确实需要它。当然，您只需要一次。要么在这个声明中，要么在上面的那个。

【讨论】：

宾果游戏——我刚刚发现了。但你会得到金星。谢谢！

【解决方案2】：

如何删除你的第一个电话，就在你的selectType = options....:下方

songSearchField.autocomplete( "option", "source", "/ajax/songLookup.php?selectType=" + selectType );

并将您的 if 语句更改为：

//// this is where I run into trouble \\\\
if(selectType != 'desc') {
songSearchField.autocomplete( "option", "source", "/ajax/songLookup.php?selectType=" + selectType );
 }

或者......我刚刚注意到这一点

这个：

if(selectType = 'desc') {

应该是这样的：

if(selectType == 'desc') {

【讨论】：