如何使用jquery自动完成从mysql数据库加载

问题描述：

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. 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>

我想要做的是能够从数据库加载数据，这些数据将显示为自动完成文本框下面的文本。我在jquery中使用ajax函数从数据库加载数据。我现在的问题是如何将这些数据放在自动建议框中。 p>

 ＆lt; html＆gt; 
＆lt; head＆gt; 
＆lt; script src =“js /  jq.js“＆gt;＆lt; / script＆gt; 
＆lt; link rel =”stylesheet“href =”css / otocomplete.css“type =”text / css“/＆gt; 
＆lt; link rel =”stylesheet“  href =“css / otocomplete.css”type =“text / css”/＆gt; 
＆lt; script type =“text / javascript”src =“js / bigiframe.js”＆gt;＆lt; / script＆gt;  
＆lt; script type =“text / javascript”src =“js / otocomplete.js”＆gt;＆lt; / script＆gt; 
＆lt; script type =“text / javascript”＆gt; 
 $（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）; \  n} 
}）; 
}）; 
}）; 
＆lt; / script＆gt;  
＆lt; / head＆gt; 
＆lt; body＆gt; 
 text：＆lt; input id =“example”/＆gt;  
＆lt; div id =“yoh”＆gt;＆lt; / div＆gt; 
＆lt; / body＆gt; 
＆lt; / html＆gt; 
  code>  pre> 
  div>

答

Are otocomplete.js/otocomplete.css the autocomplete plugin & its stylesheet? I'll assume that they are.

Is there a reason you are putting the autocomplete inside of an ajax method? 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:

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.

EDIT: I just read that the plugin's author no longer supports it, and recommends using jQuery UI's autocomplete. Personally, I'm not a big fan of jQuery UI, I just want the author's intent to be represented here.

EDIT 2: I didn't realize that you're trying to do some kind of custom UI for the auto suggest. Feel free to ignore this.

答

You have to add an event handler to your #example input.

For example you can add a .keyup() event handler and run your code after the first xx characters have been entered.

如何使用jquery自动完成从mysql数据库加载

相关推荐