I've some problems with JQuery Autoplete, my code it's like:

var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}];

$("#txtAutoplete").autoplete({
  source: mySource,
  select: function(event, ui){
    if(ui.item){
      //console.log('select', ui.item.label);
      $("#hiddenField").val(ui.item.id);
      return ui.item.label;
    }
    else{
      //console.log('select with null value');
      $("#hiddenField").val('');
    }
  },
  change: function(event, ui){
    if(ui.item){
      //console.log('change', ui.item.id);
      $("#hiddenField").val(ui.item.id);
    }
    else{
      //console.log('change with null value');
      $("#hiddenField").val('');
    }
  }
});

<link href=".11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src=".11.3.js"></script>
<script src=".11.4/jquery-ui.js"></script>
<p>
  <ol>
    <li>Type 'Value' in the text box</li>
    <li>Press 'arrow down' to select the first element</li>
    <li>Press enter</li>
    <li>Keep pressed backspace to delete pletely the selected item</li>
    <li>Press TAB</li>
    <li>Value in 'readonly' field is still there</li>
  </ol>
</p>

<input type="text" id="txtAutoplete">
<input type="text" id="hiddenField" disabled="disabled">

<button>Button added just to have an element to focus on</button>

I've some problems with JQuery Autoplete, my code it's like:

var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}];

$("#txtAutoplete").autoplete({
  source: mySource,
  select: function(event, ui){
    if(ui.item){
      //console.log('select', ui.item.label);
      $("#hiddenField").val(ui.item.id);
      return ui.item.label;
    }
    else{
      //console.log('select with null value');
      $("#hiddenField").val('');
    }
  },
  change: function(event, ui){
    if(ui.item){
      //console.log('change', ui.item.id);
      $("#hiddenField").val(ui.item.id);
    }
    else{
      //console.log('change with null value');
      $("#hiddenField").val('');
    }
  }
});

<link href="https://code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery./jquery-1.11.3.js"></script>
<script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>
<p>
  <ol>
    <li>Type 'Value' in the text box</li>
    <li>Press 'arrow down' to select the first element</li>
    <li>Press enter</li>
    <li>Keep pressed backspace to delete pletely the selected item</li>
    <li>Press TAB</li>
    <li>Value in 'readonly' field is still there</li>
  </ol>
</p>

<input type="text" id="txtAutoplete">
<input type="text" id="hiddenField" disabled="disabled">

<button>Button added just to have an element to focus on</button>

When I put the string 'value' in the editable field, autoplete appears correctly, so I can select one value and put it in the textbox with id hiddenField. Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why?

Steps to test snippet:

• Write 'value' in the editable field
• Select one value
• Clear the selected value

hiddenField will still contain old value.

Thanks

Note: It doesn't work when I clear the field after selection but still keeping the focus on it.

Updated: I reported the bug here on bugs.jqueryui.

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Mar 22, 2017 at 8:31 Alessandro asked Mar 21, 2017 at 15:50 AlessandroAlessandro 4,47299 gold badges4242 silver badges7171 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I have run to this problem and there is a hack to avoid the problem. You have to force a blur but with a setTimeout

   if(ui.item){
     //console.log('select', ui.item.label);
     $("#hiddenField").val(ui.item.id);
      setTimeout(function () {
                    $(event.target).blur();                       
                });
     return ui.item.label;
   }

You don't have to keep the inputs in sync inside the autoplete options. Attach a separate event handler to your text input like so:

$("#txtAutoplete").autoplete({
  source: ['test1', 'test2', 'test3'],
  select: function(event, ui){
      console.log('select', ui.item.value);
      $("#hiddenField").val(ui.item.value);
  }
});
$("#txtAutoplete").on("input propertychange", function () {
    console.log("change", this.value);
    $("#hiddenField").val(this.value);
});

<link href="https://code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery./jquery-1.11.3.js"></script>
<script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="txtAutoplete">
<input type="text" id="hiddenField" disabled="disabled">

When I run your code snippet, the change event does get fired each time I select an item, or when I clear the value, and the log gets printed. But the event gets fired only after I tab out after a selection, or after I click outside the auto-plete input element.

This is because, as per the documentation, the change event gets fired only when the element loses focus.

Steps that make it work:

• Write 'test' in the editable field, and select an option
• Tab out - this fires the change event
• Delete the value
• Tab out - this fires the change event