标题有点平淡,但我的问题解释如下。
目前我正在进行实时搜索:
这实现了我想要的功能,但是当然,这只有使用一点 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 而不是下拉列表中的实际选项...
最佳答案
在获取值时尝试使用 .val()
而不是 html()
。
关于javascript - 删除第一个单词 JS 之后的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44511700/