jQuery自动完成无法正常工作

我有jQuery自动完成的这个问题。我使用通过PHP函数从mySQL数据库中检索的JSON数据。jQuery自动完成无法正常工作

$.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

来源

2011-04-03 Marko Aleksić

我认为你需要使用.d.data。顺便说一句：不错的形式:) – 2011-04-03 11:13:22

非常感谢。 :) – 2011-04-03 18:08:30

这就是我的工作方式。

$("#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); 
       };

现在，我使用异步搜索，所以当用户键入的东西在产品领域，一个GET请求被发送，与术语（HTTP：//本地主机/ CI /产品/自动完成期限= XXX ），它会根据产品名称搜索到数据库中，并将匹配结果（JSON）返回到自动填充建议框。

来源

2011-04-03 18:06:01

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

来源

2011-04-03 11:31:25 mathieu

谢谢你的源代码编辑，使它看起来更优雅。但是，您建议我可以忽略的部分（._renderitem ....）会破坏我的整个自动完成功能。我想我必须使用标签，因为选择会触发其他功能。无论如何，谢谢！ – 2011-04-03 18:07:49

jQuery自动完成无法正常工作

回答

相关问题