显示Select2值不在列表中

时间:2016-11-17 02:42:16

标签: twitter-bootstrap xpages select2

虽然可以使用createSearchChoice将新值添加到Select2(3.5)元素,但如果它不在列表中,如何显示新值?我可以添加不在Select2列表中的值,但是如何显示不在列表中的默认值?

$("#select").select2({
    placeholder: "Who is the invoice from?",
    minimumInputLength: 2,
    quietMillis: 300,
    allowClear : true,
    ajax: {
        url: "accountsDataStore.xsp",
        dataType: 'json',
        data: function (term, page) {
            return {
                q: term, // search term
                page_limit: 10
            };
        },
        results: function (data, page) { return data; }
    },

    // extra code to allow entering value not in list
    id: function(object) { return object.text; },

    //Allow manually entered text in drop down.
    createSearchChoice:function(term, data) {
                        if ( $(data).filter( function() {
                                  return this.text.localeCompare(term)===0;
                              }).length===0) {
                                      return {id:term, text:term};
                        }
    },

    initSelection: function(element, callback) {
                        //sets a default value (if a value was selected previously)
                        //get the existing value
                        var id = $(element).val();

                        //if a value was selected: perform an Ajax call to retrieve the text label      
                        if (id !== "") {
                            $.ajax( 
                                "accountsDataStore.xsp", {
                                    data: { id: id },
                                    dataType: "json"
                                }).done(function(data) { 
                                       // ** TODO if value not found, display current element value -- HOW??  **
                                       callback(data); });
                        }
                    }

    }).on('change', function (evt) {
                              // Do something after value changes
                              }
);

initSelection期间,如果找不到默认值,那么如何显示当前值?

<input type="hidden" 
       id="view:_id1:_id4:callback1:inputName" 
       name="view:_id1:_id4:callback1:inputName" 
       aria-required="true" 
       value="ACME Company" 
       tabindex="-1" 
       class="select2-offscreen">

在表单中,设置了值,它不会显示在显示所选值的<span>中。我们只是以某种方式将它添加到列表中吗?

感谢。

2 个答案:

答案 0 :(得分:0)

我亲自处理select2元素,通过正确使用视图控制器(viewScoped bean),允许值不在列表中,如下所示。

使用以下代码我做了3件事:

<xp:comboBox id="comboDemo" value="#{ctrl.comboValue}" validator="#{ctrl.validateCombo}">
   <xp:selectItems value="#{ctrl.comboChoices}" />
 </xp:comboBox>
  1. 我绑定了组合的值
  2. 我确保创建并选择客户端的任何新选项都已被接受
  3. 我加载了组合框的默认选项
  4. 构建默认选项时要考虑当前的绑定值,除非它是null

    public List<SelectItem> getComboChoices() {
        if (comboChoices == null) {
            comboChoices = new ArrayList<SelectItem>();
    
            // Complete with your own logic here
            if (StringUtil.isNotEmpty(comboValue)) {
                comboChoices.add(new SelectItem(comboValue, comboValue));
            }
        }
    
        return comboChoices;
    }
    

    一旦选择了新值,我需要确保它将以其返回服务器的方式被接受。我利用验证阶段潜入新值。

    public void validateCombo(FacesContext facesContext, UIComponent component, Object value) {
        boolean isNewValue = true;
    
        for (SelectItem item : comboChoices) {
            if (value.equals(item.getValue())) {
                isNewValue = false;
                break;
            }
        }
    
        if (isNewValue) {
            String newValue = (String) value;
            comboChoices.add(new SelectItem(newValue, newValue));
        }
    }
    

    以上是我所做的一个愚蠢的版本。你可以把它变得更聪明,但我希望这个例子足够清楚。

答案 1 :(得分:0)

  

动态选项创建

     

除了预填充的选项菜单外,Select2还可以动态   根据用户在搜索框中输入的文本来创建新选项。这个   功能称为“标记”。要启用标记,请将标记选项设置为   正确:

here中查找详细信息

在select2中,您打算做的事情就是标记,这就是它的运行方式;

<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

//the major ish
$(".js-example-tags").select2({
  tags: true
});

以简单的英语方式,只需在select2初始化期间设置标签,然后您就可以选择添加一个不在下拉列表中的值。

希望这很有帮助