Question

我有jQuery自动完成的这个问题。我使用通过PHP函数从mySQL数据库检索的JSON数据。

$.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字段（度量单位）仅用于显示目的。

我附上图片供您参考。

提前谢谢。

enter image description here

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的基本样本，然后添加更多高级功能。

Answer 2

这就是我的工作方式。

$( "#prodname" ).autocomplete({
                    minLenght: 2,
                    source: "<?php echo site_url('products/autocomplete/'); ?>",
                    select: function( event, ui ) {
                            $( "#prodname" ).val( ui.item.prodname );
                            $( "#code" ).val( ui.item.code );
                            $( "#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 );
                };

现在，我使用异步搜索，因此每当用户在Products字段中输入内容时，都会发送一个GET请求，其中包含术语（http：// localhost / ci / products / autocomplete？term = xxx），这是将产品名称搜索到数据库中，将匹配结果（JSON）返回到自动完成建议框中。

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

2 个答案: