如何使用jQuery自动完成从MySQL数据库加载

Question

What I want to do is to be able to load data from the database which will show up as an auto-complete text below the textbox. 我想要做的是能够从数据库中加载数据，该数据将在文本框下方显示为自动完成的文本。 I'm using the ajax function in jquery to load data from the database. 我在jquery中使用ajax函数从数据库加载数据。 My problem now is how to put that data in the auto-suggest box. 我现在的问题是如何将这些数据放在自动建议框中。

<html>
  <head>
    <script src="js/jq.js"></script>
    <link rel="stylesheet" href="css/otocomplete.css" type="text/css" />
    <link rel="stylesheet" href="css/otocomplete.css" type="text/css" />
    <script type="text/javascript" src="js/bigiframe.js"></script>              
    <script type="text/javascript" src="js/otocomplete.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){       
        $('#example').keyup(function(){       
          var inpval = $('#example').val();       
          $.ajax({
                type: 'POST',
            data: ({p : inpval}),
                url: 'query.php',
                success: function(data) {
                      $("#yoh").autocomplete(data);
                }
            });
         });    
      });
    </script>          
  </head>
  <body>
     text: <input id="example" />               
     <div id="yoh"></div>
  </body>
</html>

Answer 1

You have to add an event handler to your #example input. 您必须在#example输入中添加事件处理程序。

For example you can add a .keyup() event handler and run your code after the first xx characters have been entered. 例如，您可以添加.keyup()事件处理程序，并在输入前xx字符后运行代码。

Answer 2

Are otocomplete.js/otocomplete.css the autocomplete plugin & its stylesheet? otocomplete.js / otocomplete.css是自动完成插件及其样式表吗？ I'll assume that they are. 我以为是。

Is there a reason you are putting the autocomplete inside of an ajax method? 您是否有理由将自动完成功能放在ajax方法中？ It works without it. 没有它就可以工作。

<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css">
<script src="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#example").autocomplete("query.php", {
            width: 260,
            selectFirst: false
        });
    });
</script>

Your php file should output one result per line, like so: 您的php文件应该每行输出一个结果，如下所示：

Gyr Falcon
Lanner Falcon
Red Falcon
...

This is all lifted straight from http://view.jquery.com/trunk/plugins/autocomplete/demo/ but I tested it, so I know it will work. 这些都是从http://view.jquery.com/trunk/plugins/autocomplete/demo/直接提出的，但是我已经对其进行了测试，所以我知道它会起作用。

EDIT: I just read that the plugin's author no longer supports it , and recommends using jQuery UI's autocomplete . 编辑：我刚刚读到该插件的作者不再支持它，并建议使用jQuery UI的autocomplete 。 Personally, I'm not a big fan of jQuery UI, I just want the author's intent to be represented here. 就个人而言，我不是jQuery UI的忠实拥护者，我只希望在此表示作者的意图。

EDIT 2: I didn't realize that you're trying to do some kind of custom UI for the auto suggest. 编辑2：我没有意识到您正在尝试为自动建议做某种自定义UI。 Feel free to ignore this. 随意忽略这一点。

如何使用jQuery自动完成从MySQL数据库加载

问题描述

2 个解决方案

解决方案1
1 2011-01-18 14:45:09

解决方案2
1 已采纳 2011-01-18 16:29:10

如何使用jQuery自动完成从MySQL数据库加载

问题描述

2 个解决方案

解决方案1 1 2011-01-18 14:45:09

解决方案2 1 已采纳 2011-01-18 16:29:10

解决方案1
1 2011-01-18 14:45:09

解决方案2
1 已采纳 2011-01-18 16:29:10