javascript - 删除第一个单词 JS 之后的所有内容

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 的 id 为 livesearch ( <div class="list-group" id="livesearch"></div> )，因此它选择整个 div 而不是下拉列表中的实际选项...

Answer 1

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