ドロップダウンjQueryオートフィルで選択> .show（）; div

Question

私は、ドロップダウンの<select>タグからjQuery自動入力設定をしています。しかし、私は一つの問題があります。私はユーザーが 'autofill'の提案の1つを選択したときに、単純な.show();特定のdivをしようとしています。 すなわち。私のドロップダウンから。私の努力はこれまでのところすべて失敗しています。私はdevコンソールで出力されたセレクタを調べてJSのクリック機能を.show(); divに追加しましたが、何も読み込まれていません.の問題jqueryがオートフィルの要素をselect > ul > liの要素としてレンダリングする方法について説明します。いずれにしても、私はこれをどのように達成することができるかもしれないかに関する提案はありますか？

すなわち。上記は「コロラド」が選択された、または「クリックされた」と言うスクリーンショットです。.show(); div。

は

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

Answer 1

あなたが使用することができます。

私の試みは

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

私のマークアップは次のようになります... (with attempted use of various selectors)

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

私のjqueryのベースオートフィルコードのようなものを見て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">

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


});