Get click event on jQuery autocomplete value

Question

Get click event on jQuery autocomplete value

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm developing a function in JQuery that uses the Autocomplete component where I search for the company name and change the company name in another field.

Example:

Field1 (autocomplete) passes information to Field2 when the option that appears in Autocomplete is clicked.

My problem is: Knowing what value was clicked and the click event to pass to the other information field.

Follow the code snippet:

var empresas = ['teste','teste2'];
$( "#e" ).autocomplete({
    minLength: 2,
    autoFocus: true,
    source: empresas
});

javascript jquery

asked by anonymous 29.09.2016 / 18:50

2 answers

0

Just overwrite the original callback function:

function AutoCompleteSelectHandler(event, ui)
{                        
    $('#Campo2').val(ui.item.value);
}

or this way, by adding the callback select : jQuery API

var empresas = ['teste','teste2'];
$( "#e" ).autocomplete({
    minLength: 2,
    autoFocus: true,
    source: empresas,
    select: function( event, ui ) { $('#Campo2').val(ui.item.value); }
});

29.09.2016 / 19:04

Understanding structures in the AssemblyInfo.cs file Relationship of Tables Laravel

score 1 · Accepted Answer

You can use the select event. I ran a test based on the example of the Jquery-UI site.

It would look like this:

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      select: function (e, i) {
        document.getElementById("msg").innerHTML = "Você selecionou o item: " + i.item.value
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
  <div id='msg'>
   </div>
</div>