如果 "No Results Match" 与 .select 如何保存自定义选项？

Question

我还在争论 text_field 还是 select 更合适。

使用 text_field 您可以保存自定义文本。

使用 select，您可以从提供的列表中进行选择。

我想要一个混合，当用户点击该字段时，会出现一个带有选项的下拉菜单，但用户可以忽略它并键入自己的自定义选项。

我试过 select2 and looked into a variety of jquery plugins provided here，但如果您键入自定义选项，它将返回 "No results matched"，然后您将无法保存它。

创建这种混合体的最佳方法是什么？我在 Rails.

上使用 Ruby

Answer 1

您可以简单地使用 select2 的 createSearchChoice 选项，这将添加新的选择而不是显示 "no results"。在 jsfiddle

查看运行

Html:

<input type="hidden" id="tags" style="width: 300px"/>

Javascript:

var lastResults = [];

$("#tags").select2({
    //multiple: true,
    placeholder: "Please enter tags",
    //tokenSeparators: [","],
    ajax: {
        multiple: true,
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: function (term, page) {
            return {
                json: JSON.stringify({results: [{id: "foo", text:"foo"},{id:"bar", text:"bar"}]}),
                q: term
            };
        },
        results: function (data, page) {
            lastResults = data.results;
            return data;
        }
    },
    createSearchChoice: function (term) {
        var text = term + (lastResults.some(function(r) { return r.text == term }) ? "" : " (new)");
        return { id: term, text: text };
    },
});

Jsfiddle：http://jsfiddle.net/XQ8Fw/674/

Answer 2

看看这是否对您有帮助。简单明了。

$('select').change(function() {
  modify();
})

function modify() {
  $('input').val($('select').val());
  output();
}

function output() {
  $('p').text('value: ' + $('input').val());
}

$('input').on('click', function() {
  $(this).select()
}).on('blur', function() {
  output();
})

modify();

select {
  position: absolute;
  width: 160px;
  height: 23px;
  left: 0;
  top: 0;
  border: 0;
}
input {
  position: absolute;
  width: 140px;
  height: 17px;
  left: 0;
  top: 0;
}
p {
  position: relative;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <select>
    <option selected="selected" value="Wednesday">Wednesday</option>
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
  </select>
  <input type="text" name="" value="">
  <p>value:</p>
</body>

</html>

如果 "No Results Match" 与 .select 如何保存自定义选项？

How to save custom option if "No Results Match" with .select?

ruby

jquery

select

ruby-on-rails

form-helpers