Select2按选项值自动完成 [英] Select2 autocomplete by option value

问题描述

我尝试为我的网站集成标记/自动完成功能.它通过选项文本工作.我快要接近结果了，但仍然挂着.

I have tried to integrate tag/autocomplete for my site. Its working through option text. I am almost close to result but still hanging.

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

Now when you try to select option text there will appear related text. But now i want to appear kathmandu or related option text searching via option value also.

例如: 当我们将搜索值 a001 出现加德满都并选择与 a002 相同时，它会出现 pokhara

Ex: when we will search value a001 kathmandu will appear and select same as a002 it will appear 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 加德满都之类的选项文本，而不要选择区域上的ID.

I think i am close after searching via value and click on it it will show relevant option with id. But i want only option text like pokhara kathmandu not an ID on select area.

推荐答案

要删除仅输入Id时显示的Id和Text的重复项，请检查输入的词是否与现有的Id，如果确实返回匹配选项的Text:

To remove the double-ups of the Id and the Text showing when entering just the Id check whether the entered term matches an existing Id, and if it does simply return the Text of the matching option:

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按选项值自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！