JQuery ui autocomplete trigger function after programatically search

Question

I have a street input field with JQuery ui autocomplete suggestions. After the user selected one of the suggestions, he should enter the number. Then on number blur a function validates with below autocomplete search function if the street is in the suggestions. If yes, an other function should be called. I can't call the other function.

Here is my code:

$("#street").autocomplete({ 
   source: "street.php",
minLength: 2,    
    search: function (event,ui) {
            //Return to input field
            if (ui.item==null)
             {
             alert("Please select a street.");          
           $("#street").focus();
           return;
            } else{
                //call an outside function,
                //does not work
                address-search();
            }               
    }
  });

Thank you in advance for help for solving this problem.

tymothytym · Accepted Answer · 2016-03-21 09:58:38Z

1

I think you need the search callback to do that:

$("#street").on("autocompletesearch", function(event, ui) {
    if (ui.item === null) {
       alert("Please select a street.");          
       $("#street").focus();
    } else {
       address-search();
    }
});

Documentation here: http://api.jqueryui.com/autocomplete/#event-change

Edit: Based on your specific code, I think you want this:

$(document).ready(function() {
  var availableTags = [
    "1.Street",
    "2.Street",
    "3.Street"
  ];
  $("#street")
    .autocomplete({
      source: availableTags,
      minLength: 2,
    })
    .on("autocompletechange", function(event, ui) {
      if (ui.item === null) {
        alert("Please select a street.");
        $("#street").focus();
        xhr.abort();
      } else {
        address_search();
      }
    });
  function address_search() {
    alert($("#street").val());
  }
});

Updated jsfiddle: https://jsfiddle.net/dupxj3mu/3/

edited Mar 21, 2016 at 9:58

answered Mar 20, 2016 at 0:51

tymothytym

1,6213 gold badges18 silver badges27 bronze badges

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

6 Comments

user3260999 Over a year ago

Hello, the autocompletesearch does not check correctly and triggers for false results.

tymothytym Over a year ago

Do you have the full code, or a link to a jsfiddle so I can see the problem in action?

user3260999 Over a year ago

Hello, if use in my script this code works but also only after false input. jsfiddle.net/dupxj3mu Maybe because I can not enable Jquery. Thank you for your help.

tymothytym Over a year ago

You'll definitely need jQuery and jQueryUI for autocomplete to work: jsfiddle.net/dupxj3mu/2

user3260999 Over a year ago

Hello tymothytym, thank you for enabling Jquery. Like mentioned, it works only after one wrong input. I would need either a possibility to trigger the function without wrong input or a possibility to stop the search_street function if the street input field has a wrong street name.

|

user3260999 · Accepted Answer · 2016-03-21 21:15:49Z

thank you, I found a solution for my own. https://jsfiddle.net/dupxj3mu/5/

function search_street() {
    $("#street").on("autocompletechange", function(event, ui) {
      if (ui.item === null) {
        $("#hiddenstreet").val($("#street").val());
        $("#street").val("");
        return false;
      }
    });
    if ($("#street").val() === "") {
      $("#street").val($("#hiddenstreet").val());    
      $("#street").focus();
      alert("Please select a street.");     
      $("#hiddenstreet").val("");
      return false;
    } else {
      address_search();
    }
  }

But the autocomplete test only run once then again address_search() will be called by wrong street names, too. I will empty the street input field on wrong input and put aside in a DIV that the street input was wrong. Then address_search() will run only on right selection.

Collectives™ on Stack Overflow

JQuery ui autocomplete trigger function after programatically search

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related