2011-08-31 85 views
0

我需要一些jquery插件,因爲他們在大多數航班預訂網站上使用它,您必須從聯合航空公司選擇您的出發/到達機場。jquery自動填充字段,需要一個選定的值?

我環顧四周,但我找不到任何好的解決方案。我需要一個自動完成組合框,它將保持打開狀態,直到用戶從可能值列表中選擇一個項目,並且它必須支持一些隱藏的id號碼,而不是文本 - jquery上的插件通常只發送文本值。

現在我使用http://blog.idealmind.com.br/geral/simple-autocomplete-jquery-plugin/ - 但問題是用戶可以通過鍵盤輸入任何不在列表中的東西。

有沒有更好的插件可以使用?我真的不是一個jquery或js程序員我自己...

回答

2

這裏有兩個不同的問題。

發送隱藏ID應該使用源中具有值和標籤屬性的對象數組完成。您需要使用選擇和焦點選項來支持此選項。 http://jqueryui.com/demos/autocomplete/#custom-data

強制用戶選擇一個有效的選項可以通過幾種方法完成。如果用戶輸入無效選項然後離開盒子,我喜歡消隱輸入框的想法。您可以使用「更改」選項執行此操作。詹姆斯的代碼也是這樣。

這裏是與兩個特徵的工作示例: http://jsfiddle.net/vZeHr/4/

1

毫米....我面臨同樣的問題,並不能解決它。我想你將不得不編輯插件。

你說

但這個問題是,用戶可以輸入任何不 通過鍵盤就行了。

事情是你不能禁用文本字段,因爲自動完成值是根據你在文本字段中輸入的內容添加的。

一種可能的方式是您可以檢查文本字段的on-change或on-blur功能中是否存在任何暗示值。如果沒有建議,那麼你輸入了一個錯誤的值。所以你可以給出一個錯誤信息。

2

jQuery UI的插件實際上允許您通過文本值和整數作爲返回類型發送。

這是我用於自動完成的通用代碼。

$("#c_where").autocomplete({ 
    autoFill: true, 
    mustMatch: true, 
    selectFirst: true, 
    source: function(request, response) { 
     $.ajax({ 
      type: "post", 
      url: "inc/ajax/json/hotels.php", // Upload this aswell 
      data: { 
       maxRows: 12, 
       term: request.term 
      }, 
      success: function(data) { 
       response($.map(JSON.parse(data), function(item) { 
        return { 
         label: item.name, 
         value: item.name, 
         id: item.hid 
        } 
       })); 
      } 
     }); 
    }, 
    change: function(event, ui) { 
     /*if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) { 
      $(this).val(''); 
     }*/ 
     if (!ui.item) { 
      $(this).val(''); 
     } 
    }, 
    select: function(event, ui) { 
     $('#c_where').data("id", ui.item.id); 
    } 
}).live('keydown', function (e) { 
    var keyCode = e.keyCode || e.which; 
    if((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) { 
     $(this).val($(".ui-autocomplete li:visible:first").text()); 
    } 
});