下拉选择与jQuery自动填充>选择.show（）; div

我有一个jQuery自动填充设置，从一个下拉式<select>标签。它的工作很好，但我有一个问题;当用户选择'autofill'建议中的一个时，我试图简单地将.show();指定为div; 即。从我的下拉列表中选择。我迄今为止的所有努力都失败了，我一直在检查在dev控制台中输出的选择器并在JS中添加点击功能到.show();我的div，但是没有任何内容正在被读取，我想象这是由于z-index问题或某事关于jQuery如何为自动填充渲染select > ul > li元素。无论如何，我有什么建议可以实现这个目标？下拉选择与jQuery自动填充>选择.show（）; div

即。上面是一个截图，一次，说'科罗拉多'被选中，或'点击'.show();股利。

我尝试看起来像(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>

来源

2016-08-22 Fred Randall

可以使用autocomplete内置事件如select

$("#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(); 
 
    } 
 
});

<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">

来源

2016-08-22 15:09:43 Jag

参考Fiddle

HTML

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

$(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 
}); 


});

来源

2016-08-22 15:19:49

下拉选择与jQuery自动填充>选择.show（）; div

回答

相关问题