入力フィールドをクリックすると表示スタイルが切り替わります

Question

この特定の入力フィールドがアクティブな間は動的に生成されたリストを表示したいのですが、入力ボックスのリスト外をクリックすると非表示になります。あなたがスナップを実行すると、入力フィールドがフォーカスされているかクリックされているかにかかわらずリストが表示されます。フォーカスされていないときには隠しておきます。

これまでのところ、私はそれを実装しようとしているが、これはフォーカスとブラーのイベントをお試しください

$("#pickup input").click(function() { 
 
    var num = $(this).find("ul.suggestbox").length; 
 
    if (num > 0) { 
 
    $(".suggestbox ul").toggleClass("clickdisplay"); 
 
    } 
 
});

.suggestbox { 
 
    overflow: auto; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 1px 1px; 
 
    z-index: 1; 
 
} 
 
.clickdisplay { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="input-field" style="width: 30%"> 
 
    <label class="label-icon" for="search"><i class="material-icons">search</i> 
 
    </label> 
 
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required> 
 
    </div> 
 
    <ul class="suggestbox" id="sub_navlist"> 
 
<li> option 1 </li> 
 
<li> option 2 </li> 
 
<li> option 3 </li> 
 
<li> option 4 </li> 
 
<li> option 5 </li> 
 
<li> option 6 </li> 
 
<li> option 7 </li> 
 
</ul> 
 
</form>

Answer 1

$（this）は、あなたが思うものではありません。

$(function() { 
 
    $("#pickup").on("focus", function() { 
 
    var $list = $(this).closest(".input-field").find("ul.suggestbox"); 
 
    $list.toggle($list.length > 0); // show it if it is not empty 
 
    }).on("blur", function() { 
 
    var $list = $(this).closest(".input-field").find("ul.suggestbox"); 
 
    $list.hide(); // hide this list 
 
    }).focus(); 
 
});

.suggestbox { 
 
    overflow: auto; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 1px 1px; 
 
    z-index: 1; 
 
    margin-top:-3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="input-field" style="width: 30%"> 
 
    <label class="label-icon" for="pickup"><i class="material-icons">search</i> 
 
    </label> 
 
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required> 
 
    <ul class="suggestbox" id="sub_navlist"> 
 
     <li>option 1</li> 
 
     <li>option 2</li> 
 
     <li>option 3</li> 
 
     <li>option 4</li> 
 
     <li>option 5</li> 
 
     <li>option 6</li> 
 
     <li>option 7</li> 
 
    </ul> 
 
    </div> 
 
</form>

Answer 2

が動作していない：

$("#pickup").on('focus', function() { 
 
    var num = $(this).closest('form').find("ul.suggestbox").length; 
 
    if (num > 0) { 
 
    $(".suggestbox").addClass("clickdisplay"); 
 
    } 
 
}); 
 
$("body").on('click', function(e) { 
 
    if ($(e.target).closest('ul.suggestbox,#pickup').length == 0) {//check if the element selected is the input or the list 
 
    var num = $("ul.suggestbox").length; 
 
    if (num > 0) { 
 
     $(".suggestbox").removeClass("clickdisplay"); 
 
    } 
 
    } 
 
});

.suggestbox { 
 
    overflow: hidden; 
 
    height:0; 
 
    background-color: #f9f9f9; 
 
    max-width: 170px; 
 
    margin-top:0; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 1px 1px; 
 
    z-index: 1; 
 
} 
 
.clickdisplay { 
 
    display: block; 
 
    height:auto; 
 
} 
 
body { 
 
    height: 400px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="input-field" style="width: 30%"> 
 
    <label class="label-icon" for="search"><i class="material-icons">search</i></br> 
 
    </label> 
 
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required> 
 
    </div> 
 
    <ul class="suggestbox" id="sub_navlist"> 
 
    <li>option 1</li> 
 
    <li>option 2</li> 
 
    <li>option 3</li> 
 
    <li>option 4</li> 
 
    <li>option 5</li> 
 
    <li>option 6</li> 
 
    <li>option 7</li> 
 
    </ul> 
 
</form>

Answer 3

あなたは、ドキュメント上でイベントをクリックしてキャッチすることができますし、#pickupがアクティブであれば、ショーリスト：

は、私はあなたがこれを行うためのものだと思い

$(document).on("click",function() { 
 
var num = $("ul.suggestbox").length; 
 
    if (num > 0) { 
 
    $(".suggestbox").toggle($("#pickup").is(":focus") || $(".suggestbox").is(":hover")); 
 
    } 
 
});

.suggestbox { 
 
    overflow: auto; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 1px 1px; 
 
    z-index: 1; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="input-field" style="width: 30%"> 
 
    <label class="label-icon" for="search"><i class="material-icons">search</i> 
 
    </label> 
 
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required onkeypress="somefunction(platform, 'pickup')"> 
 
    </div> 
 
    <ul class="suggestbox" id="sub_navlist"><li>item1</li><li>item2</li></ul> 
 
</form>