单击链接触发操作后下拉列表不会关闭

Question

我有一个输入字段，可以在输入时打开一个建议列表（实时）。一个 javascript 函数，将结果作为下拉列表返回到 div。

此下拉列表中的每个项目都是触发操作的 href 链接。这个动作也是一个javascript函数。

<ul>
    <li><a href="#" onclick="getObject(\'index\')">Item name</a></li>
    <li> ... other items ... </li>
    ....
</ul>

到目前为止还可以，工作正常。

问题：单击项目后下拉列表保持打开状态。我搜索并尝试了几十个类似的解决方案，但我就是无法关闭它。

这是单击列表中的项目时触发的操作。传递值“q”。

（为了简化这里的问题，我添加了一个警报而不是我将使用的实际功能。q）

if(typeof $=='undefined') {
    function $(q) {
        return(document.getElementById(q));
    }
}

function getObject(q) {
    alert(q);
    /// close dropdown list here
};

非常感谢任何帮助！几天来我一直在搜索和尝试类似的代码。谢谢！

这是触发下拉列表的函数

function showSearch(str){
if (str.length==0){ 
        document.getElementById("resultlist").innerHTML="";
    document.getElementById("resultlist").style.border="0px";
    return;
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("resultlist").innerHTML=xmlhttp.responseText;
document.getElementById("resultlist").style.border="1px solid #CCCCCC";
}
};
xmlhttp.open("GET","search.php?q="+str,true);
xmlhttp.send();

}

search.php 使用简单的 select 语句查找 mysql 表。

Answer 1

有了可用的信息，我认为最好的解决方案是为 ul 设置一个 id，然后用

隐藏它

$('#the_ul_id').hide();

Answer 2

我明白了！我正在使用 css 样式来显示或不显示。 Jeremy 和 Iñaki 的“隐藏”提示给了我这个想法……谢谢！感谢 Adrián 提供的关于避免内联函数的提示。

这是任何有类似问题的人的代码

输入字段和包含下拉列表的div：

<form><input type="text" class="searchfield" placeholder="Search" onKeyUp="showSearch(this.value)"></form>
<div id="resultlist"></div>

输入搜索时触发的功能。它将显示一个下拉菜单，其中包含项目作为链接：

function showSearch(str)
{

// this will reset the css display value so a new search is displayed
var listShow = document.querySelector("#resultlist");
listShow.style.display = "inherit";


if (str.length==0)
{

document.getElementById("resultlist").innerHTML="";
document.getElementById("resultlist").style.border="0px";
return;
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("resultlist").innerHTML=xmlhttp.responseText;
document.getElementById("resultlist").style.border="1px solid #A5ACB2";
}
};
xmlhttp.open("GET","search.php?q="+str,true);
xmlhttp.send();


}

search.php 将选择查询一个 mysql 表并将结果作为 ul / li 列表返回。 $indx 是唯一的项目 ID，并被传递为“q”。

<ul>
<li><a href="#" onclick="getObject(\'' . $indx . '\')">Item name</a></li>
<li> ... other items ... </li>
....
</ul>

点击显示列表中的项目时触发的功能：

function getObject(q) {

// does something here with the value q

// this lets the drop down list disappear after click on an item
var listHide = document.querySelector("#resultlist");
listHide.style.display = "none";

};