Clear form field after select for jQuery UI Autocomplete

Question

We're using JQuery UI Autocomplete and I'm having problems clearing the textbox containing the search term once the query is complete. Here is our JQuery code:

$(document).ready(function () {
        $("form#search input#term").autocomplete({
            source: '<%= Url.Action("Display", "Search") %>',
            delay: 200,
            minLength: 3,
            parse: function (data) {
                var array = new Array();
                for (var i = 0; i < data.length; i++) {
                    array[array.length] = { data: data[i], value: data[i], result: data[i].link };
                }
                return array;
            },
            select: function (event, ui) {
                window.location.href = ui.item.value;
                $(this).val() = "";
                return false;
            }
        });
    });

This code works fine in Firefox, but IE 8 is throwing an exception and gives a dialog asking if I want to use the IE Script Debugger. I saw this Stack Overflow post: Clear form field after select for jQuery UI Autocomplete which says the solution to the problem is to return false from the JQuery select function, but that didn't help. Anyone have suggestions on how to fix this?

I don't believe this is the official jQueryUI autocomplete plugin (http://jqueryui.com/demos/autocomplete/) because of the `parse` option. Is this the case? If so, your question should probably link to the correct plugin. — Andrew Whitaker, Mar 22 '11 at 02:37
@Andrew, Thanks for the comment, but I think it is the official JQueryUI. We downloaded the file named jquery-ui-1.8.5.custom.min.js file from the JQuery UI site. This file is a bit dated, the current release is jquery-ui-1.8.11.custom.min.js, which I've downloaded also, tried it with latest version of JQuery, and then Autocomplete doesn't work for me at all . — Russ Clark, Mar 22 '11 at 12:49
Well, there's no `parse` option on the jQueryUI widget (as far as I know). Functionality that you expect to come from that option might be causing you some issues (kind of a long shot I know). — Andrew Whitaker, Mar 22 '11 at 13:37
@Andrew - OK, Thanks, I'll see what I can find about the parse option, maybe it is the culprit. — Russ Clark, Mar 22 '11 at 13:57

score 10 · Answer 1 · answered Apr 13 '11 at 12:10

10

Using Jquery 1.5.1 and JQuery-ui 1.8.10, the following works for me:

select: function (event, ui) {
                event.preventDefault() // <===
                window.location.href = ui.item.value;
                $(this).val('');                
            }

answered Apr 13 '11 at 12:10

Rik

483
3
12

Yep its the `PreventDefault` that does the trick here... I would love to know what it's 'supposed' to bubble up to though. – isNaN1247 Jun 01 '12 at 17:45
preventDefault helped me too. Thanks! – Vahagn Nahapetyan Mar 07 '13 at 13:40

score 2 · Answer 2 · edited Mar 21 '11 at 19:46

2

$(this).val('');

instead of

$(this).val() = "";

edited Mar 21 '11 at 19:46

Hendrik Brummermann

8,242
3
31
55

answered Mar 21 '11 at 18:56

capi

1,453
12
10

Thanks - I should have mentioned that I already tried that prior to the post and the result was the same. – Russ Clark Mar 21 '11 at 20:01
Weirdly this worked for me, I don't know how `val()` works but it's obviously not as simple as I thought. – Inspector Squirrel Oct 17 '14 at 16:23

score 1 · Accepted Answer · answered Apr 11 '11 at 13:38

1

The only way I've found to fix this problem was to use the old JQuery 1.4.1 dll along with the new JQuery UI dll, version 1.8.11, I think there is a but in the JQuery dll after version 1.4.1 causing this problem. If so, maybe a future version will fix it.

answered Apr 11 '11 at 13:38

Russ Clark

13,260
16
56
81

Using jQuery 1.8.2 and jqueryUI 1.9.0 the `event.preventDefault()` trick mentioned in the most upvoted answer did the magic for me. http://stackoverflow.com/a/5648954/1063730 – nuala Nov 30 '12 at 12:22

Kdecom · Answer 4 · 2013-02-04T02:18:49.723

0

this works for me...

jQuery('.SELECETOR'). autocomplete({
   ....
   ....
}).on( "autocompleteselect", function( event, ui ) {
               jQuery(this).val('');
         });

edited Feb 04 '13 at 02:18

answered Feb 04 '13 at 02:13

Kdecom

728
6
6

score 0 · Answer 5 · edited Feb 04 '13 at 02:36

0

This works for me:

jQuery('.SELECTOR'). autocomplete({
    // Code
}).on( "autocompleteselect", function( event, ui ) {
    jQuery(this).val('');
});

edited Feb 04 '13 at 02:36

pjmorse

9,204
9
54
124

answered Feb 04 '13 at 02:18

Kdecom

728
6
6

Clear form field after select for jQuery UI Autocomplete

5 Answers5