如何選擇文本並使用JavaScript或jQuery將其顯示在另一個文本框中

我有一個PHP/AJAX搜索腳本，可以正常工作。問題是，當我在文本字段中輸入某些內容時，建議將顯示在下方，但無法選擇。總之，我想選擇其中一個建議，並在選擇它時在搜索文本字段中顯示值。如何選擇文本並使用JavaScript或jQuery將其顯示在另一個文本框中

我已經嘗試了JavaScript的解決方案，但它不工作。它顯示控制檯中的錯誤，如「選擇值爲空」。

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.."; 
} 
?>

來源

2015-08-21 mastermind

如果#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()); 
});

來源

2015-08-21 13:02:39 NightOwlPrgmr

我試過你的代碼..但控制檯說這是不是一個功能... – mastermind

你可以改變它爲.click（）？例如：'$（'＃list option'）。click（function（）{$（'＃sear'）.val（$（this）.text（））;}）;' – NightOwlPrgmr

That worked ......;）但仍有一個問題.. – mastermind

您可以檢查此代碼，我昨天用它。你只需要根據自己的目標

還什麼我給你更改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" />

和您的輸入必須有汽車類

搜索。 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; 

}

來源

2015-08-21 12:41:52 badr

說真話..我不明白你的答案，你不明白我的問題 – mastermind

認爲它是一個搜索字段..你輸入的東西，它給出s根據它uggestions。這工作得很好..我真的問的是，我想這種sugesstion b選擇...所以用戶不必輸入完整的信... – mastermind

好吧等我有這個答案:) 一分鐘 – badr

您鍵入撥錯方向選擇。它應該是如下：

<select onchange="ali()" id="list" ></select>

來源

2015-08-21 12:43:22

沒有人，你沒有得到它..我不想要一個額外的選擇標籤..考慮它作爲一個搜索選項..只是一個輸入字段上面和sugesstions以下.. – mastermind

這條線怎麼樣？ echo「」。「

」; –

它呢？ – mastermind

如何選擇文本並使用JavaScript或jQuery將其顯示在另一個文本框中

回答

相關問題