2

我确信有一个简单的解决方案，但我似乎无法找到它。我正在使用 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>
4

2 回答 2

2

两件事情：

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

编辑-我最初删除了更改源的行，但乍一看，我认为您确实需要它。当然，您只需要一次。无论是在此声明中，还是在上述声明中。

于 2013-04-12T15:36:30.350 回答
1

如何删除您的第一个电话，就在您的下方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') {
于 2013-04-12T15:27:47.537 回答