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自動完成無法正常工作

回答

相關問題