How to selectively disable jquery ui autocomplete?

Question

I'm sure there's a simple solution to this but I can't seem to find it. I'm using jquery ui autocomplete for a db search. The autocomplete suggests words/phrases that exist in the db to aide the user in building better search queries. I have a select field which changes the source for the autocomplete to search different tables, which all works perfectly fine.

But for one of the options of the select, I need to disable the autocomplete functionality, returning the text field to just the plain ol' normal text field functionality. I was thinking I could just wrap it in an if statement within the select.change function, but this leads to all sorts of unexpected behavior - if changing back to a different option, the autocomplete does not function.

What is the best approach on this?

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

Here's the 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>

How about using two different inputs - plain one and wrapped into autocomplete instead, switching their visibility based on option selected? — raina77ow
– raina77ow, Commented Apr 12, 2013 at 15:24
I found the solution (besides the obvious typo Loren pointed out). After disabling the autocomplete, you have to send an enable option first in the else statement. — Chapman
– Chapman, Commented Apr 12, 2013 at 15:39

Jason P · Accepted Answer · 2013-04-12 15:36:30Z

2

Two things:

if(selectType = 'desc') {

Should be

if(selectType == 'desc') {

Also, I see where you are disabling the autocomplete, but I don't see where you are re-enabling it. Try this:

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

Edit - I originally removed the line to change the source, but on second glance, I think you do need that. Of course, you only need it once. Either in this statement, or the one above.

answered Apr 12, 2013 at 15:36

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chapman Over a year ago

Bingo - I just found that. but you get the gold star. Thanks!

99823 · Accepted Answer · 2013-04-12 15:27:47Z

1

How about removing your first call to this, right below your selectType = options....:

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

And changing your if statement to this:

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

OR ...I just noticed this

this:

if(selectType = 'desc') {

should be this:

if(selectType == 'desc') {

answered Apr 12, 2013 at 15:27

99823

2,4578 gold badges40 silver badges66 bronze badges

Collectives™ on Stack Overflow

How to selectively disable jquery ui autocomplete?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related