键入时,文本字段自动完成(在字段中)

时间:2014-10-29 13:11:09

标签: jquery ajax text autocomplete box

我正在尝试开发一个功能,根据数据库中的内容提出建议,或者允许您设置自己的值。这是一种让用户知道系统中已有内容的方式,以防他们想要对类似的内容进行分类。所以我做到了。

问题在于,下面的代码提供了一个下拉菜单,我无法弄清楚要在Google中搜索哪些字词来获取您键入的内联完成类型的教程,并填写剩下的部分内容。当您在框中键入正确的单词时,不会下拉。

有人有任何建议吗?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Auto Complete Input box</title>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <script>
$(document).ready
(function()
{
    $("#tag").keyup
    (function() 
        {
            var tag= $(this).val();
            if(tag!='')
            {
                $.ajax(
                {
                    type: "GET",
                    url: "autocomplete.php",
                    data: "q=" + tag,  
                    cache: true,
                    success: function(result)
                    {
                        $("#tag").val(result);
                    }
                }
                );
            }
            return false; 
        }
    );
}
);
</script>
    </head>
    <body>
    <form method="post" action="input.php">
    Please put something in: <input name="tag" type="text" id="tag" size="20">
    <input type="submit" value="Submit">
    </form>

    <?php
    $mysqli=mysqli_connect('localhost','XXXXXXXXXX','XXXXXXXX','XXXXXXXXXXX') or die("Database Error");
     $sql="SELECT auto_complete_suggestions FROM auto_complete";
     $result = mysqli_query($mysqli,$sql) or die(mysqli_error());
    ?>
    </body>
    </html>

与此篇文章相关联

    <?php
     $q=$_GET['q'];
     $my_data=mysql_real_escape_string($q);
     $mysqli=mysqli_connect('localhost','XXXXXXXXX','XXXXXXXXXX','XXXXXXXXXX') or die("Database Error");
     $sql = "SELECT DISTINCT auto_complete_suggestions FROM auto_complete WHERE auto_complete_suggestions LIKE '%$my_data%' 
 ORDER BY CASE WHEN auto_complete_suggestions = '$mydata' THEN 0  
               WHEN auto_complete_suggestions LIKE '$mydata%' THEN 1  
               WHEN auto_complete_suggestions LIKE '%$mydata%' THEN 2  
               WHEN auto_complete_suggestions LIKE '%$mydata' THEN 3  
               ELSE 4
          END, auto_complete_suggestions LIMIT 0,1";
     $result = mysqli_query($mysqli,$sql) or die(mysqli_error());

     if($result)
     {
      while($row=mysqli_fetch_array($result))
      {
       echo $row['auto_complete_suggestions']."\n";
      }
     }
    ?>

我假设这将是一个AJAX或JQuery任务,但我没有找到任何示例,所以任何帮助指向我正确的方向将非常感激。

简明扼要:希望在我输入时构建一个完成文本的功能,并直接在文本框中提供建议。

谢谢!

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您会希望将数据库中的建议放在&#34;标记&#34;文本框。如果是这种情况,你可以做一些事情:

$(document).ready(function(){
$("#tag").keyup(function() 
{
    var tag= $(this).val();
    if(tag!='')
    {
        $.ajax({
        type: "GET",
        url: "autocomplete.php",
        data: "q=" + tag,  
        cache: false,
        success: function(result)
        {
            $("#tag").val(result);
        }
        });
    }return false; 
});
});

虽然您必须将结果限制为一条记录。

在autocomplete.php中(我假设这是第二个代码段)你会这样做:

$sql="SELECT DISTINCT auto_complete_suggestions FROM auto_complete WHERE auto_complete_suggestions LIKE '%$my_data%' ORDER BY auto_complete_suggestions LIMIT 0,1";

一旦keyup事件触发并使用标记文本框的值进行搜索,这将进行AJAX调用。