Question

以下是我的实际<script>标记在一个页面上，输入框在HTML的正文标记中 -

<script type="text/javascript" language="JavaScript">
    window.onload =
        function addSearchText() { 
            document.getElementById("searchterms").value = 'Enter Search Term';
        }
        function removeSearchText() {
            document.getElementById("searchterms").value ="";     
        }
</script>

<form >
    <input type="text" name="searchTerms" id="searchterms" class="inptBx" onfocus="removeSearchText();"/>
    <html:image pageKey="img.common.catalogsearch_button" styleClass="btnGo" />
    <div id="SuggestionListDiv"></div>
</form>

当我在输入框中放入一些文本时，它会通过ajax在数据库中搜索它，并在下拉列表中以<ol> <li id="1">sam</li> <li id="2">joe</li> <li id="3">dan</li> <li id="4">tom</li> <li id="5">dick</li> </ol>这种格式显示数据。现在，如果我选择任何值“tom”，那么它应该被设置到输入框中。任何人都可以建议如何通过简单的javascript实现这一点，我也无法控制正在生成的<ol><li>。请建议提前谢谢..

Answer 1

不使用jQuery：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form> 
    <input type="text" name="searchTerms" id="searchterms" class="inptBx" />
    <html:image pageKey="img.common.catalogsearch_button" styleClass="btnGo" /> 
    <div id="SuggestionListDiv">
        <ol> 
            <li id="1">sam</li> 
            <li id="2">joe</li> 
            <li id="3">dan</li> 
            <li id="4">tom</li>
            <li id="5">dick</li>
        </ol>
    </div> 
</form>

<script type="text/javascript">
    (function () {
        var searchterms, suggestionList;

        searchterms = document.getElementById('searchterms');
        suggestionList = document.getElementById('SuggestionListDiv');

        if (searchterms && suggestionList) {
            searchterms.value = 'Enter Search Term';

            searchterms.onfocus = function removeSearchText() { 
                searchterms.value = ""; 
            };

            suggestionList.onclick = function setSearchTerms (e) {
                var targ;
                var e = e || window.event;

                if (e.target) {
                    targ = e.target;
                }
                else if (e.srcElement) {
                    targ = e.srcElement;
                }

                // defeat Safari bug 
                if (targ.nodeType === 3) {
                    targ = targ.parentNode;
                }

                if (targ && targ.tagName.toLowerCase() === 'li' && targ.hasChildNodes()) {
                    searchterms.value = targ.childNodes[0].nodeValue;
                }
            };
        }
    }());
</script>
</body>
</html>

我假设li元素有一个文本节点，我确保我可以在（几乎）所有浏览器上获得目标。如果您使用jQuery，您可以使用jQuery附加事件处理程序并假设e.target是正确的。当您更新div的内部内容时，事件处理程序仍然有效。

Answer 2

因此，在选择时，您想要将输入框中存储的li元素的文本内容对吗？向onclick元素添加li个事件。

例如：如果内容是动态生成的，

<li onclick='setSelectedItem(this)'>tom</li>或者像这样，

var arr = document.getElementById("SuggestedListDiv").getElementsByTagName("ol")[0].getElementsByTagName("li")
for(var in arr)
{
  arr[i].onclick = function(){
   setSelectedItem(this)
  }
}

其中，

function setSelectedItem(elem)
{
   document.getElementById("searchterms").value = elem.textContent; //elem.innerText for IE
}

编辑：查看如何获取列表元素。首先是DIV，然后有序列表元素随后出现li。添加它，它会正常工作。

Answer 3

使用jquery你可以试试这个：

$(li).live('click',function(){
var id = $(this).attr("id");
var label = $(this).text();
$("#searchTerms").val(label);
});

Answer 4

在经典的Javascript中：

document.getElementById('SuggestionListDiv').innerHTML(AjaxResponse); //Where AjaxResponse is the response from AJAX call

在jQuery中：

$('#SuggestionListDiv').html(AjaxResponse); //Where AjaxResponse is the response from AJAX call

通过Javascript设置输入框值

4 个答案: