当值删除时,Jquery自动完成组合框插件事件

时间:2017-06-12 11:23:00

标签: jquery jquery-ui-autocomplete

为了检查选中的值,我使用:

$( "#combobox1" ).combobox( {
            select: function (event, ui) {
                var value=$( "#combobox1 option:selected" ).text();
               ...
        });

如何检查输入中的值是否已删除(例如为空)?

1 个答案:

答案 0 :(得分:0)

在这里,我已经为您构建了完整的示例并对其进行了详细评论,希望您能发现它有用



function allmaped(){
  // add all options from select to array
  var arr = [];
  $('#combobox1').find('option').each(function(e){ arr.push( $(this).val() )});
  // define autocomplete
  $( "#tags" ).autocomplete({ source:arr });
}

// run this on pageload
allmaped();
// if click on remove button OR any other event removes select options => rebuild it!
$('#remove').on( 'click', function(){ 
  $('#combobox1').find('option').eq(0).remove(); 
  $( '#tags' ).autocomplete( "destroy" );
  // run autocomplete function again
  allmaped();  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>



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

<div><button id="remove">REMOVE OPTION 1</button></div>

<select id="combobox1" style="display: none;">
	<option value="Claudine HATEBUR DE CALDERóN">Claudine HATEBUR DE CALDERóN</option>
	<option value="Lilly R. EHRET">Lilly R. EHRET</option>
	<option value="Tamara ROTH">Tamara ROTH</option>
	<option value="Tamara BOTH">Tamara BOTH</option>
	<option value="Tamara GOTH">Tamara GOTH</option>
</select>
&#13;
&#13;
&#13;