doupi8598 2011-01-18 14:39
浏览 130
已采纳

如何使用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>
  • 写回答

2条回答 默认 最新

  • doufubu2518 2011-01-18 16:29
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料