CODEWITHSUNDEEP
jqueryuser-interfaceautocomplete
Chapman
Chapman

Reputation: 33

How to selectively disable jquery ui autocomplete?

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>

Upvotes: 2

Views: 9704

Answers (2)

Jason P
Jason P

Reputation: 27022

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.

Upvotes: 2

99823
99823

Reputation: 2457

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

Upvotes: 1

Related Questions