Question

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

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

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

到目前为止，工作正常。

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

这是在单击列表中的项目时触发的操作。传递价值＆＃34; q＆＃34;。

（为了简化这里的问题，我添加了一个警告，而不是我正在使用的实际功能.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

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

隐藏它

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

};

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

2 个答案: