2016-05-02 9 views
0

フィールドの最初の文字をオートコンプリートテキストボックスに入力して特定のフィールドのアイテムを表示しようとしましたが、テキストボックスに文字を入力するとランダム手紙が表示されます。助けてください。私はこれで新しいです。 はここにここに私のAjaxコード自動完成テキストボックスにデータベースフィールド名を表示する方法

<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 

<script> 
    function showHint(str) { 
if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = ""; 
    return; 
} else { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
     } 
    }; 
    xmlhttp.open("GET", "drop1.php?search=" + str, true); 
    xmlhttp.send(); 
    } 
} 
</script> 
</html> 

<div style="font:14px arial"> 

    <input type="text" id="search" name="search" onKeyUp="showHint(this.value)"/> 
</div> <p id="txtHint"></p> 
</body> 

であるあなたのコードが動作しているPHPコード

<?php 
include("connection.php"); 
$search=$_GET['search']; 
$query=mysql_query("select * from students WHERE name LIKE '$search%' OR name='$search'"); 
while($rs = mysql_fetch_array($query)) { 
echo $rs['name']; 
} 
?> 
+0

それらのランダムな文字は何ですか? –

答えて

0

です。唯一の小さな問題は、あなたは各値を分けていないということです。以下のように<br/>を使用して、別の行に候補を表示することができます。

echo $rs['name']."<br/>"; 

更新入力フィールドとして:

<input type="text" id="search" name="search" autocomplete="off" onKeyUp="showHint(this.value)"/> 
+0

hello frnd ru malayali –

+0

@RASHEEDRAMSHIはい! :) –

+0

plz私に完全なコード –

0

元気ですか?

お試しくださいStackoverflow - How to use source: function()… and AJAX in JQuery UI autocomplete

か試してみてください。

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title> jQuery UI Autocomplete - Default functionality 
     < /title> 
      < link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
       <script src="//code.jquery.com/jquery-1.10.2.js"> 
       </script> 
       <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"> 
       </script> 
       <link rel="stylesheet" href="/resources/demos/style.css"> 
       <script> 
       $(function() { 

        $("#tags").autocomplete({ 
         source: function(request, response) { 
          var name = jQuery("input.suggest-user").val(); 
          jQuery.get("drop1.php?search=" + name, function(data) { 
           console.log(data); // Ok, I get the data. Data looks like that: 
           test = data; // ["[email protected]", "[email protected]","[email protected]"] 
           return test; // But what now? How do I display my data? 
          }); 
         }, 
         minLength: 1 
        }); 
       }); 
       </script> 
</head> 

<body> 
    <div class="ui-widget"> 
     <label for="tags"> Tags: 
     </label> 
     <input id="tags"> 
    </div> 
</body> 

PHPコード:

<?php 
include("connection.php"); 
$search=$_GET['search']; 
$query=mysql_query("select * from students WHERE name LIKE '$search%' OR name='$search'"); 
$rs = mysql_fetch_array($query); 
if(is_array($rs)){ 
    echo json_encode(array_column($rs, 'name')); 
} 

?> 
関連する問題