如何使用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组合框创建新值

回答

相关问题