Question

对于大多数开发人员来说，这可能是显而易见的，但我无法确定何时删除作为Key press事件的一部分创建的搜索下拉列表。

这是我当前的脚本，我将名为searchDropDown的下拉列表添加到现有div中，该div也具有文本输入。所以唯一的问题是何时删除searchDropdown框？因为如果我删除文本输入的模糊，它将在选择任何内容之前删除下拉列表。

 $(document).ready(function() { 
    //First handler to focus & blur
    $("div.searchBox input[type=text]").focus(function() {      
        if($(this).val() == "Enter location"){
            $(this).val("");
        }else{
        }
        $(this).css("color", "black");
    });
    $("div.searchBox").focusin(function() {
        console.debug("focus");
    });
    $("div.searchBox").focusout(function() {
        console.debug("focusout");
        return;
        if($(this).val() == ""){
            $(this).val("Enter location");
        }           
        $("div#searchDropDown").remove();       
        $(this).css("color", "gray");               
    }); 

    //Keydown create dropdown
    $("div.searchBox input[type=text]").keyup(function() {      
//      console.debug($("div.searchBox input[type=text]").val());
        if($("div.searchBox input[type=text]").val().length > 3){
            $("div#searchDropDown").remove();
            //send ajax request.            
            createDropDownDiv("Jaipur,delhi");
        }else{
            //remove Dropdown
            $("div#searchDropDown").remove();
        }
    });
});

function createDropDownDiv(searchListStr){
    var divString;
    divString = "<div id='searchDropDown'>";
    var searchList = searchListStr.split(",");

    for ( var int = 0; int < searchList.length; int++) {
        divString += "<p class='searchResultItem'>";
        divString += searchList[int];
        divString += "</p>";
    }

    divString += "</div>";
    $("div.searchBox").append(divString);
}

Answer 1

将此添加到您当前的代码

 $(document).on("click",".searchResultItem",function(){
$("div.searchBox input[type=text]").val($(this).html());
    $(".searchResultItem").remove();
});

Demo

Updated Fiddle

Answer 2

在onBlur事件

中删除它

$("div.searchBox input[type=text]").blur(function() {
    //remove Dropdown
    $("div#searchDropDown").remove();
});

<强> Working demo

Answer 3

使用：

$("div.searchBox").on('focusout', function() {

而不是

$("div.searchBox").focusout(function() {

因为它是一个动态创建的元素。 jQuery 'on'

为什么在删除元素之前你return？

$("div.searchBox").on('focusout', function() {
        console.debug("focusout");
        //return
        if($(this).val() == ""){
            $(this).val("Enter location");
        }           
        $("div#searchDropDown").remove();       
        $(this).css("color", "gray");               
        return; // return here
    });

JSfiddle

删除搜索下拉列表的事件

3 个答案: