php - jQuery 自动完成功能无法正常工作

Question

我遇到了 jQuery 自动完成的问题。我使用 JSON 数据，通过 PHP 函数从 mySQL 数据库检索。

$.ajax({
        dataType: 'json',
        async: false,
        method: 'post',
        success: function(data) {
            test = data;
        }, 
        url: '<?php echo site_url('products/autocomplete/'); ?>'
    });

因此，我的 JSON 数据存储在变量中:'test'。这是我的自动完成代码:

$( "#prodname" ).autocomplete({
                    minLenght: 2,
                    source: test,
                    focus: function( event, ui ) {
                        $( "#prodname" ).val( ui.item.prodname );
                        return false;
                    },
                    select: function( event, ui ) {
                        $( "#prodname" ).val( ui.item.prodname );
                        $( "#uname" ).val( ui.item.uname );
                        $( "input[name=prodname_fk]" ).val( ui.item.id );
                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.prodname + "</a>" )
                        .appendTo( ul );
                };

数据加载正确，但自动完成字段似乎无法正常工作。我的 JSON 对象的第一项以“b”开头，所以只有当我按下字母“b”时，自动完成(建议)才会出现。

我该如何解决这个问题？我的猜测可能是因为我使用了 async: false，但这是我一开始让它发挥作用的唯一方法。

我的产品字段需要自动完成功能，因此当用户选择产品时，隐藏字段 (prodname_fk) 会收到相应的产品 ID。而 uname 字段(度量单位)仅用于显示目的。

我附上图片供您引用。

提前谢谢你。

Answer 1

如果你的php页面返回json，你可以直接把它的url放在自动完成函数中:

<script>
    $(function() {
        $( "#birds" ).autocomplete({
            source: '<?php echo site_url('products/autocomplete/'); ?>',
            minLength: 2,
            select: function( event, ui ) {
                $( "#prodname" ).val( ui.item.prodname );
                $( "#uname" ).val( ui.item.uname );
                $( "input[name=prodname_fk]" ).val( ui.item.id );
            }
        });
    });
</script>

在您的脚本中，您可以删除 _renderitem 替换项，因为它仅在您需要特定渲染时才有用，例如

'<em>' + item.prodname + '</em>(' + item.id ')'

您应该尝试改编来自 http://jqueryui.com/demos/autocomplete/#remote 的基本示例然后添加更多高级功能。