自动完成 jquery 不起作用

autocomplete jquery not working

本文关键字：jquery 不起作用      更新时间：2023-09-26
<html>
 <head>        
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>      
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">      
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">        
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">

<script type="text/javascript">//<![CDATA[ 
     $(window).load(function(){
        $("#auto").autocomplete({ 
           source: ['hi', 'bye', 'foo', 'bar'],
           change: function (event, ui) {
                   if (ui.item) {
                     $("#message").text("user selected " + ui.item.value + "     from list.");            
                   } else {
                     $("#message").text("user entered " + this.value);
                   }
            }
        });    
    });    
</script>
</head>
<body>
  <input type="text" id="auto" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  <span id="message">user selected bye from list.</span>
  <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 22px; left: 0px; display: none; width: 193px;"><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">bye</a></li><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">bar</a></li></ul></body></html>

我想将 jquery 的源代码更改为 abc.php 。它必须从数据库中获取数据。如何更改上面的代码自动完成。如何从数据库中获取自动编译日期。请帮助我解决此问题。

你需要select事件而不是change 

$("#auto").autocomplete({ 
    source: ['hi', 'bye', 'foo', 'bar'],
    select: function (event, ui) {
        if (ui.item) {
            $("#message").text("user selected " + ui.item.value + " from list.");            
        } else {
            $("#message").text("user entered " + this.value);
        }
    }
});

演示

请参阅 API 文档

尝试从 PHP 数据源获取数据：

$( "#auto" ).autocomplete({
        source: "abc.php",
        select: function( event, ui ) {
            console.log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

如果你看一下jquery ui页面(https://jqueryui.com/autocomplete/#remote(上的例子，你只需要将源代码更改为：

source: "abc.php"

要记住的两件事：

  1. 自动完成功能将名为 term 的参数发送到您的 URL，其中包含自动函数的输入值。
  2. 自动完成需要对象列表作为响应，这些对象具有两个属性：label(用于显示(和value(用于标识显示的值(。如果label不存在，它将改用value。
相关文章：