Question

我有一个jQuery自动填充设置，来自下拉<select>标记。它工作得很好但是我有一个问题;当用户选择其中一个“.show();”建议时，我会尝试简化autofill特定div。 ie。来自我的一个下拉菜单。到目前为止，我所有的努力都失败了，我一直在检查在开发控制台中输出的选择器，并在JS中添加一个单击函数到.show();我的div，但是没有任何东西正在读取，我想象它是由于一个z-index问题或关于jquery如何呈现自动填充的select > ul > li元素的问题。无论如何，有关我如何能够实现这一目标的任何建议？

ie。上面是截图，一次说“科罗拉多”被选中，或者“点击”.show(); div。

我的尝试看起来像(with attempted use of various selectors)

$('input').click(function(event) {
     $(".state_overlay").show();  
    // $('li.ui-menu-item').innerhtml().append.$("h2.statename"); /* edit */
});

我的jquery基础自动填充代码......

$.widget("app.autocomplete", $.ui.autocomplete, {
    _create: function() {
      if(this.element.is("select")) {
        var self = this;
        this.original = this.element.hide();
        this.element = $("<input/>").insertAfter(this.original);
        this.options.source = function(request, response) {
          var filter = $.ui.autocomplete.filter,
            $options = self.original.find("option"),
            result = $options.map(function() {
              return $(this).html();
            });
          response(filter(result, request.term));
        };
      }
      this._super("_create");
    },
    _destroy: function() {
      this._super("_destroy");
      this.element.remove();
      this.original.show();
    }
  });
  $(function() {
    $("#autocomplete").autocomplete();
  });

我的加价看起来像这样：

<select id="autocomplete" class="autocomplete">
    <option value="">Select State</option>
    <option value="AL">Alabama</option>

Answer 1

您可以使用select

之类的autocomplete内置事件

＆＃13;

$("#autocomplete").autocomplete({
  source: ["NY", "", "NJ", "CT", "PA", "NC", "VA"],
  select: function(event, ui) {
    console.log(ui);
    var selectedItem = ui.item;
    //your logic goes here
    if (selectedItem.value == 'some value')
      $('some div').show();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css" rel="stylesheet" />
<input id="autocomplete">

＆＃13;

Answer 2

参考Fiddle

<强> HTML

<input type="text" id="autocomplete1" /> 
<div id="div1" style="display: none;">
Your Content
</div>

<强> JS

$(function() {
var countries = [      
  "Albama",
  "Colorado"      
];

$(document).on('click','.ui-autocomplete li div',function(){
    if ($(this).text() == "Colorado")   
  {
  $("#div1").show();
  }
});


$('#autocomplete1').autocomplete({
            source: countries,
            minLength: 0,
            scroll: true
});   


});

使用jQuery autofill＆gt;下拉选择选择.show（）; DIV

2 个答案: