web-dev-qa-db-ja.com

オプション値によるSelect2オートコンプリート

私のサイトのタグ/オートコンプリートを統合しようとしました。オプションのテキストを介して動作します。私はほとんど結果に近いですが、まだぶら下がっています。

ここで、オプションテキストを選択しようとすると、関連するテキストが表示されます。しかし、今私はカトマンズまたはオプション値を介して関連するオプションのテキスト検索も表示したいと思います。

例：値を検索するとa001kathmandが表示され、同じように選択されます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に関連するオプションが表示されます。しかし、私はpokharakathmandのようなオプションテキストのみを選択領域のIDにしたくありません。

javascriptjquerycssjquery-select2select2
10
Kumar

Idだけを入力したときに表示されるTextとIdのダブルアップを削除するには、入力した用語が既存の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>
9
K Scandrett

あなたが検索した場合a001の場合、出力は出力の表示IDとテキストの両方です。学ぶ placeholder 。

値がオブジェクトの場合、オブジェクトはSelect2の内部オブジェクトと互換性がある必要があります。 idは、プレースホルダーを表示するかどうかを決定するときに検索するIDである必要があります。テキストは、そのオプションが選択されたときに表示されるプレースホルダーである必要があります。

例：検索a001入力後kathmanduおよびa001intextbox

usingplaceholderin 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>
1
Sumit patel