Select2 按选项值自动完成

Posted 2023-05-07

【中文标题】Select2 按选项值自动完成

【英文标题】：Select2 autocomplete by option value

【发布时间】：2017-08-15 11:44:35

【问题描述】：

我尝试为我的网站集成标签/自动完成功能。它通过选项文本工作。我几乎接近结果，但仍然挂起。

现在，当您尝试选择选项文本时，将出现相关文本。但现在我也想通过选项值搜索出现加德满都或相关选项文本。

例如： 当我们搜索值时 a001 kathmandu 会出现并选择与 a002 相同的值会出现 pokhara

$("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 这样的选项文本，而不是选择区域的 ID。

【参考方案1】：

要删除在仅输入Id 时显示的Id 和Text 的重复，请检查输入的术语是否与现有的Id 匹配，如果匹配则简单地返回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>

【讨论】：

非常感谢伙计。如果禁用选择列表以外的选项，我将不胜感激。现在它通过 ID 工作。现在我们可以避免选择这个标签prntscr.com/ept0yg

好的，这应该很容易，只要在不匹配时返回null。我会更新代码...

【参考方案2】：

如果您搜索a001，则输出是显示 id 和输出中的文本。了解placeholder。

如果值是一个对象，该对象应该兼容 Select2 的内部对象。 id 应该是何时查找的 id 确定是否应显示占位符。文字应该是 选择该选项时显示的占位符。

示例：在文本框中输入显示kathmandu和a001后搜索a001

使用 placeholder 在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>

【讨论】：

是的，但我不需要现场的 a001。只需显示加德满都或拉利特普尔。现在显示值和文本