Clear form field, if autocomplete is null

Asked

Viewed 588 times

2

I am using the code for autocomplete below. I type the initials of a fruit and my select returns the names of the fruits that match those initials. Selecting one of them, I take the id and play in another field. So far the problem works is that I wanted that if nothing was found, clear the field with id.

Example:

I open the form and fill in "ma" will appear papaya and if I select papaya Cod 1 goes to the field idFruta delete and type "li" appears lemon and the idFruta is filled with 2 this is all working.

Now if you type "zz" nothing appears, only the message "fruit not found" but my field idFruta remains with the id from the previously selected fruit. I wanted then that by selecting "Nonexistent Fruit" clear my field idFruta.

You can do it?

jQuery.fn.autoCompleteEditora = function (idCod, idFocus, formAddFruta) {
    $(this).autocomplete({
        appendTo: formAddFruta,
        source: function (request, response) {
            $("#loadingFruta").show();
            $.ajax({
                url: '../fruta/frutas.json',
                type: "GET",
                dataType: "json",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                data: {
                    q: request.term
                },
                success: function (data) {
                    if (!data.length) {
                        var result = [
                            {
                                label: 'Fruta inexistente' ,
                                value: response.term
                            }
                        ];
                        response(result);
                    } else {
                        response($.map(data, function (item) {
                            return {
                                label: item.nome,
                                id: item.cod,
                                abbrev: item
                            };
                        }));
                        $("#loadingFruta").hide();
                    }
                }
            });
        },
        minLength: 2,
        focus: function (event, ui) {
            $(this).val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            cod = ui.item.abbrev.cod;
            idCod.val(cod);
            (idFocus !== null) ? idFocus.focus() : idCod.focus();

        }
    });
    $["ui"]["autocomplete"].prototype["_renderItem"] = function (ul, item) {
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a></a>").html(item.label))
                .appendTo(ul);
    };
};

  • When you say "fruit not found" what appears is "Fruit not found"? That’s where you see if there is or is not certain?

  • That’s right. I’ll correct the text.

  • It would also help if you put html here to see the elements you refer to etc... You can put it here if you like: https://jsfiddle.net/ with the functionality it has so far

  • Adds the function response here too.

  • Are you sure it was you who wrote this code, because for me the solution is so obvious that I can’t believe that someone who developed all this logic, does not know where the value of the field remains.... But here’s a clue. In the code block where you add "Nonexistent Fruit"... add something like "idCod.val(');" Since I don’t know if idCod is global, nor the input id, I can’t post a code as a response.

  • @mauhumor I didn’t do it. That’s why I’m asking for help.

Show 1 more comment

1 answer

2


You can reset the field within the if that checks if the response to the ajax request has no content. Included the following line:

 idCod.val('');    

I’m guessing that idCod is global, since it was used in another event, and I also assume that the code posted is working. It should look like this:

  ...
  if (!data.length) {
      var result = [
         {
          label: 'Fruta inexistente' ,
          value: response.term
         }
      ];
      idCod.val('');    //Incluir esta linha
      response(result);
   } else {
   ...

Update: idCod is within the scope. I hadn’t noticed it initially. So that’s the way it is.

  • It worked as I needed it. Thank you very much. Happy Holidays.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.