如何使用jQuery UI組合框創建新值

我剛剛在頁面中添加了jQuery UI組合框。它似乎將選擇限制爲僅傳入（或出現在選擇列表中）的選擇。我想要做的是讓用戶輸入一個不在選擇列表中的值，然後將數據發送到服務器（在帖子上）並創建一個。我看不到任何禁用「驗證」的選項。我將如何去添加這個功能？如何使用jQuery UI組合框創建新值

- 編輯 -

我在添加代碼即可獲得自動完成標有按鈕的工作。然而，這在調用Ajax方法時不起作用。 Ajax方法正確地返回json（顏色列表），但是當我開始輸入'Re'時，希望它會過濾掉包含Red的項目，但不會。

這裏是我的代碼：

var $colInput = $("#Colour").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "/admin/stockitems/colours", 
       dataType: "json", 
       data: { id: null }, 
       success: function (data) { 
        var arr = []; 
        $.each(data, function (i, val) { 
         arr.push(val.Title); 
        }); 
        response(arr); 
       } 
      }); 
     }, 
     minLength: 0 
    }).addClass("ui-widget ui-widget-content ui-corner-left"); 

    $("<button type='button'>&nbsp;</button>") 
     .attr("tabIndex", -1) 
     .attr("title", "Show All Items") 
     .insertAfter($colInput) 
     .button({ 
      icons: { 
       primary: "ui-icon-triangle-1-s" 
      }, 
      text: false 
     }) 
     .removeClass("ui-corner-all") 
     .addClass("ui-corner-right ui-button-icon") 
     .click(function() { 
      // close if already visible       
      if ($colInput.autocomplete("widget").is(":visible")) { 
       $colInput.autocomplete("close"); 
       return; 
      } 
      $(this).blur(); 
      $colInput.autocomplete("search", ""); 
      $colInput.focus(); 
     });

來源

2011-04-25 lloydphillips

組合框演示使用底層select元素作爲後備存儲的自動完成構件。我不會推薦這樣的形式，你可以讓用戶輸入他們想要的任何東西。

但是，你可以模仿自己的組合框的效果沒有太多的麻煩：

var $input = $("#tags").autocomplete({ 
    source: availableTags, 
    minLength: 0 
}).addClass("ui-widget ui-widget-content ui-corner-left"); 

$("<button type='button'>&nbsp;</button>")      
    .attr("tabIndex", -1)      
    .attr("title", "Show All Items")      
    .insertAfter($input)      
    .button({       
     icons: {        
      primary: "ui-icon-triangle-1-s"       
     },       
     text: false      
    })      
    .removeClass("ui-corner-all")      
    .addClass("ui-corner-right ui-button-icon")     
    .click(function() {       
     // close if already visible       
     if ($input.autocomplete("widget").is(":visible")) { 
      $input.autocomplete("close"); 
      return;       
     }            
     $(this).blur();             
     $input.autocomplete("search", "");       
     $input.focus();      
    });

基本上，這是自動完成構件的默認行爲，再加上一個按鈕，將下拉的所有選項。

這種方式，支持字段是input元素，你可以在表單提交需要用戶的輸入，並將其添加到源下一次。

這裏有一個工作示例：http://jsfiddle.net/andrewwhitaker/CDYBk/1/

來源

2011-04-25 23:45:22

通過Ajax調用在這裏掙扎。我用一些本地數據處理了你的例子，但是當我調用一個Ajax結果並在響應中傳回一個數組時，這些項目不會被濾除。我會在下面的回覆中添加我的代碼。 – lloydphillips 2011-04-26 01:55:02

嗨安德魯，我編輯包括我的代碼上面。希望你可以對此有所瞭解，我花了大約一個半小時的時間試圖讓它過濾。 – lloydphillips 2011-04-26 01:58:28

忽略我。得到它的工作。稍後將發佈我的代碼，意識到它是在每個字符輸入中向我的控制器輪詢，而不是處理緩存（本地）結果 - der！ :) – lloydphillips 2011-04-26 02:05:45

你也可以只搶的東西，如$（...）的輸入值parentNode.children [1]。患兒[0] .value的，如果你不感覺像搞亂小部件。然後你可以隨時添加一個選擇選項，如果你想。

來源

2015-07-15 23:51:47 evanlikesstuff

有點晚了黨有夥計，我5年前問這個問題，得到的回答當時 :) – lloydphillips 2015-07-17 00:19:47

如何使用jQuery UI組合框創建新值

回答

相關問題