Select2 按选项值自动完成

Question

我已尝试为我的站点集成 tag/autocomplete。它通过选项文本工作。我几乎接近结果但仍然悬而未决。

现在，当您尝试 select 选项文本时，将会出现相关文本。但现在我也想通过选项值搜索 kathmandu 或相关选项文本。

例如：当我们搜索值时 a001 kathmandu 将出现并且 select 与 a002 相同出现博卡拉

$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%',
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
     id: term,
     text: term,
     value: true // add additional parameters
    }
  }
});

.select2-container {
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select"  multiple="multiple">
  <option value="a001">Kathmandu</option>
  <option value="a002">Pokhara</option>
  <option value="a003">Lalitpur</option>
</select>

我想我在通过值搜索后接近了，点击它会显示带有 id 的相关选项。但我只想要像 pokhara kathmandu 这样的选项文本，而不是 select 区域的 ID。

Answer 1

如果您搜索 a001，则输出会在输出中显示 id 和文本。学习placeholder。

If the value is an object, the object should be compatible with Select2's internal objects. The id should be the id to look for when determining if the placeholder should be displayed. The text should be the placeholder to display when that option is selected.

示例：在 textbox[=36= 中输入显示 kathmandu 和 a001 后搜索 a001 ]

使用 placeholder in select2

placeholder: { id: "-1", text: "Select an option", }

$("select").select2({ tags: "true", placeholder: { id: "-1", text: "Select an option", }, allowClear: true, width: '100%', createTag: function(params) { var term = $.trim(params.term); if (term === '') { return null; } return { id: term, text: term, value: true // add additional parameters } } });

.select2-container { max-width: 400px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <select class="custom-select" multiple="multiple"> <option value="a001">Kathmandu</option> <option value="a002">Pokhara</option> <option value="a003">Lalitpur</option> </select>

Answer 2

要删除仅输入 Id 时显示的 Id 和 Text 的重复，请检查输入的术语是否与现有的 Id 相匹配，以及如果它只是 return 匹配选项的 Text:

options = [];

// create an array of select options for a lookup
$('.custom-select option').each(function(idx) {
    options.push({id: $(this).val(), text: $(this).text()});
});


$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%',
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }
    
    // check whether the term matches an id
    var search = $.grep(options, function( n, i ) {
      return ( n.id === term || n.text === term); // check against id and text
    });
    
    // if a match is found replace the term with the options' text
    if (search.length) 
      term = search[0].text;
    else
      return null; // didn't match id or text value so don't add it to selection
    
    return {
     id: term,
     text: term,
     value: true // add additional parameters
    }
  }
});

$('select').on('select2:select', function (evt) {
  //console.log(evt);
  //return false;
});

.select2-container {
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select"  multiple="multiple">
  <option value="a001">Kathmandu</option>
  <option value="a002">Pokhara</option>
  <option value="a003">Lalitpur</option>
</select>

Select2 按选项值自动完成

Select2 autocomplete by option value

javascript

jquery

css

jquery-select2

select2