Question

标题有点乏味但我的问题在下面解释。

目前我正在进行实时搜索：

这就是我想要它做的事情，但当然，这只能用一点JS来实现。

现在，当您单击其中一个选项时，它会从您的搜索中获取它通常会将您带到一个链接，但我添加了以下JS，以便从中删除所有HTML代码并从中添加所选的用户名下拉到文本框。

<script type="text/javascript">
    $(document).ready(function(){
        $("#livesearch").click(function(){
            var value = $(this).html();
            var input = $('#append_value');
            var content = value;
            var text = $(content).text(); //removes all HTML
            input.val(text);
        });
    });
</script>

现在，这一切都很完美，但除此之外还有一个问题。当您从下拉列表中选择一个选项时，它会将两个选项附加到文本框中：

现在，这可能与上面的代码有关，但我只想要用户选择将任何选项附加到文本框中。

因此，例如，我搜索战场，得到battlefield1和battlefield2的结果。如果用户选择battlefield2我希望battlefield2放置在文本框中，反之亦然。

我一直在尝试从美国东部时间下午1点开始这样做，所以当我说我已经有很多次寻求解决方案时，你可以相信我。

提前感谢您的帮助。：）

修改：

我正在进行搜索（是的，我意识到SQL已被弃用）：

的index.html

<script type="text/javascript">
    function lightbg_clr() {
        $('#qu').val("");
        $('#textbox-clr').text("");
        $('#search-layer').css({"width":"auto","height":"auto"});
        $('#livesearch').css({"display":"none"});
        $("#qu").focus();
    };

    function fx(str) {
        var s1=document.getElementById("qu").value;
        var xmlhttps;
        if (str.length==0) {
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
            document.getElementById("livesearch").style.display="block";
            $('#textbox-clr').text("");
            return;
        }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttps=new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttps=new ActiveXObject("Microsoft.XMLHTTPS");
        }
        xmlhttps.onreadystatechange=function() {
            if (xmlhttps.readyState==4 && xmlhttps.status==200) {
                document.getElementById("livesearch").innerHTML=xmlhttps.responseText;
                document.getElementById("livesearch").style.display="block";
                $('#textbox-clr').text("X");
            }
        }
        xmlhttps.open("GET","scripts/search_friends.php?n="+s1,true);
        xmlhttps.send();
    }
</script>
<input type="text" onKeyUp="fx(this.value)" autocomplete="off" name="qu" id="qu" class="form-control" placeholder="Name of the person or group">
<div class="list-group" id="livesearch"></div>
<input type="text" id="append_valueq">
<script type="text/javascript">
    $(document).ready(function(){
        $("#livesearch").click(function(){
            var value = $(this).val();
            var input = $('#append_valueq');
            var content = value;
            var text = $(content).text();
            input.val(text);
        });
    });
</script>

search_friends.php

<?php
include('../Connections/ls.php'); //script to connect to DB
$s1=$_REQUEST["n"];
$select_query="SELECT * FROM users WHERE Username LIKE '%".$s1."%'";
$sql=mysql_query($select_query) or die (mysql_error());
$s="";
while($row=mysql_fetch_array($sql))
{
    $s=$s."
    <a href='javascript:void(0)'>".$row['Username']."</a>
    "   ;
}
echo $s;
?>

这最终给了我在第一张图片中看到的结果。

我现在意识到我遇到的问题是div具有livesearch（<div class="list-group" id="livesearch"></div>）的id，所以它选择整个div而不是下拉列表中的实际选项...

Answer 1

在获取值时尝试使用.val()而不是html()。

Answer 2

实际上有一种非常简单的方法可以做到这一点。

由于您还没有提供HTML代码，我会展示自己的所作所为。

您可以使用以下内容获取点击的值：

document.getElementById("dropdown").value();

请确保您没有在ID中包含＃标签符号/井号。

然后，您可以应用此值，让我们称之为val，这样： document.getElementById（＆＃34; textbox＆＃34;）。value = val

我创建了一个JSFiddle，它显示了这个概念。看看您是否可以使用自己的代码：https://jsfiddle.net/1j4m1ekc/7/

如果问题仍然存在，请告诉我。我也想看看你的HTML。

Answer 3

我不需要立即解决这个问题，因为我找到了另一种方法来做我想做的事情，但是如果Stackoverflow社区的其他人有问题，我们将不胜感激。与此类似，需要一个解决方案。我找到的解决方案如下。

这仍然被认为是实时搜索，但是，我创建了一个可滚动的容器并列出了该容器中的所有用户，所以它现在看起来像这样。

现在从该容器中我发现了一个在线脚本，它将过滤掉与搜索框输入不匹配的所有用户。我找到的脚本来自：Live Search，如果你想看一个关于脚本如何工作的演示，View Demo。所以现在当我在文本框中输入搜索词时，它看起来像这样

这可能不是最好的解决方案，但它适用于我，并按我的意愿行事。也许它也适合你：）

在第一个单词JS

3 个答案: