Question

<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。它必须从数据库中获取数据。如何更改自动执行上面的代码。如何从数据库中获取自动填充日期。请帮我解决这个问题。

Answer 1

您需要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);
        }
    }
});

Demo

See API Documentation

Answer 2

尝试使用此方法从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 );
        }
    });

Answer 3

如果您查看jquery ui页面（https://jqueryui.com/autocomplete/#remote）上的示例，您只需将源代码更改为：

source: "abc.php"

要记住两件事：

自动填充功能会将名为term的参数发送到您的网址，其中包含自动填充的输入值。
自动填充需要一个对象列表作为响应，它有两个属性：label（用于显示）和value（用于标识显示的值）。如果label不存在，则会使用value代替{{1}}。

自动完成jquery无法正常工作

3 个答案:

Demo