CODEWITHSUNDEEP
jqueryasp.net-mvc-4
Alireza K.
Alireza K.

Reputation: 29

(jQuery-Autocomplete) Show all the results after clearing search box

im fairly new to the jquery and im building an MVC 4 website, this works as expected however I want to handle the event where the user clears the search criteria and then I update my table to its original state 

    var submitAutoCompleteForm = function (event, ui) {
    var $input = $(this);
    $input.val(ui.item.label);
    var $form = $input.parents("form:first");
    $form.submit();
};
var createAutoComplete = function () {
    var $input = $(this);
    var options = {
        source: $input.attr("data-otf-autocomplete"),
        select: submitAutoCompleteForm
    };
    $input.autocomplete(options);
};
$("input[data-otf-autocomplete]").each(createAutoComplete);

Upvotes: 1

Views: 534

Answers (2)

Alireza K.
Alireza K.

Reputation: 29

I ended up using a different approach which is essentially the same thing as @MonkeyZeus suggestion

 $("input[type='search']").keyup("search", function () {
    if (!this.value) {
      //code to update the table

} });

Upvotes: 0

MonkeyZeus
MonkeyZeus

Reputation: 20737

You will need to add this option to require 0 chars to activate the search:

minLength:  0

With this enabled you can just hit the down-arrow and the list will show

EDIT:

Now that I understand the problem better you will likely need to add the "search" option The search option fires before anything is requested from the source so it is an optimal place to see if the field is empty or not.

,search: function(event, ui){
             if($(this).val() == ''){
                 //code to show table
             }
         }

You can also use the change option but in my experience it only fire upon a change in the value or more closely when the field fires a blur event so I do not personally enjoy its' behavior in my application

,change: function(event, ui){
             if($(this).val() == ''){
                 //code to show table
             }
         }

Upvotes: 1

Related Questions