如何选择文本并使用JavaScript或jQuery在另一个文本字段中显示它
How to select text and display it in another textfield using JavaScript or jQuery
我有一个PHP/AJAX搜索脚本工作得很好。问题是,当我在文本字段中输入一些东西,建议出现在下面,但他们不能被选中。简而言之,我想选择其中一个建议,并在选择它时在搜索文本字段中显示其值。
我在JavaScript中尝试了一个解决方案,但它不起作用。它在控制台中显示一个错误,如"选择值为null"。
ajax.php
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
</head>
<body>
<input id="sear" autocomplete="off" type="text" name="search"
placeholder="Seaarch here" onkeyup="search(this.value)">
<div onclick="ali()" id="list" ></div>
<script>
function search(str){
if(str.length ==0){
document.getElementById("list").innerHTML="Please Enter Something";
return;}
xml=new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){
document.getElementById("list").innerHTML=xml.responseText;}
}
xml.open("GET","search.php?char="+str,true);
xml.send();
}
</script>
<script>
document.addEventListener("DOMContentLoaded",function(){
function ali(){
var acs;
var x=document.getElementById("#list").select();
acs=x.value;
document.getElementById("#sear").innerHtml=acs;
}
});
</script>
</body>
search.php
<?php
$con=mysqli_connect("localhost","root","","userdiary");
$str=$_GET['char'];
$sql="SELECT * FROM `login` WHERE `user_id` LIKE '$str%' OR `user_name` LIKE
'$str%'";
$query=mysqli_query($con,$sql);
if(mysqli_num_rows($query)>0){
while($res=mysqli_fetch_assoc($query)){
echo "<option>" .$res['user_name']."</option>"."<hr>";
}
}
else{
echo "No match Found..";
}
?>
如果#sear
元素看起来像这样,一旦建议填充到它:
<div id="list">
<option>test</option>
<option>test a</option>
<option>test b</option>
</div>
,那么你可以尝试在你的jQuery脚本:
$('#list option').on('click', function() {
$('#sear').val($(this).text());
});
选择输入错误。应该是如下内容:
<select onchange="ali()" id="list" ></select>
您可以查看我昨天使用的代码。您只需根据您的目标更改SQL部分的名称
我给你的是jQuery ui你需要添加<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
和你的输入必须有auto类
search.php:
<?php
define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'some');
if (isset($_GET['term'])){
$return_arr = array();
try {
$conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare('SELECT Tname FROM Topic WHERE Tname LIKE :term');
$stmt->execute(array('term' => '%'.$_GET['term'].'%'));
while($row = $stmt->fetch()) {
$return_arr[] = $row['Tname'];
}
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
/* Toss back results as json encoded array. */
echo json_encode($return_arr);
}
?>
jQuery UI
$(function() {
$(".auto").autocomplete({
source: "search.php",
minLength: 1,
});
});
和CSS
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: 5px .4em;
line-height: 1.5;
min-height: 0;
font-weight: normal;
z-index:11;
}
ul#ui-id-1{
z-index:11;
display: none;
top: 132px;
left: 354.5px;
width: 283px;
}
相关文章:
- 基于文本jquery php更改按钮
- 选择“p文本jquery”
- 附加 HTML 转义文本:jQuery
- 如何知道选中/突出显示的文本jquery的顺序出现
- Action.on('模糊')不't处理输入文本-jQuery 1.9+
- 在当前工具提示文本 JQuery 旁边追加或添加新文本
- 文本自动移动以适应动画相邻文本 (jquery):如何平滑
- 获取锚点的特定文本 - jQuery
- 从文本 jquery 中查找和挑选出模式
- 延迟后如何更改文本 - jQuery.
- 更改按钮文本 jQuery
- 使用 :包含 找到一个文本 jquery
- 获取引导程序单选按钮文本-jquery
- onchange函数转换为输入文本JQuery的数组
- 语法错误未终止字符串文本jquery
- 将输入占位符文本与span文本jquery交换
- 更改数值为文本- jQuery / NivoSlider
- 在文本区搜索指定的文本- jQuery/Javascript
- 一个字一个字地突出显示文本(jquery)(关闭)
- 无终止字符串文本jquery或更多