Question

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

但是对于select的一个选项，我需要禁用自动完成功能，将文本字段返回到普通文本字段功能。我想我可以将它包装在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>

Answer 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 );
}

编辑 - 我最初删除了更改源代码的行，但是第二眼，我认为你确实需要这样做。当然，你只需要一次。在本声明或上述声明中。

Answer 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') {

如何有选择地禁用jquery ui自动完成？

2 个答案: