select2を一致させる方法

Question

the most basic "states" select2 exampleを再作成しようとしていますが、通常のselect要素のように最初の文字を超えて一致しません。 select2の読み込み中のように見えます。たとえば、選択された値をselect要素の右側に表示します。しかし、状態を入力しようとすると、最初の文字と一致するように見えます。つまり、「t」と入力すると「Texas」と一致しますが、「dak」と入力すると「North Dakota」ではなく「Delaware」に一致します。

私は完全なhtmlページのgistを作成しました。私はselect要素をサンプルページから直接コピーしたので、それほど多くはありません。

一言で言えば、私はjs-example-basic-singleクラスのselect要素を作成してから、その要素に対してselect2()を呼び出します。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".js-example-basic-single").select2(); 
    }); 
</script> 

編集：JS Bin

Answer 1

Updated jsBinに。

チェックあなた要旨のコードに基づいて、以下の簡単な作業スニペット、とあなたはCSSのリンクを追加していることを確認してくださいは、次のとおりです。このことができます

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 

希望を。

$(document).ready(function() { 
 
    $(".js-example-basic-single").select2({width:'100%'}); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<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> 
 

 
<select class="js-example-basic-single js-states form-control"> 
 
    <optgroup label="Alaskan/Hawaiian Time Zone"> 
 
    <option value="AK">Alaska</option> 
 
    <option value="HI">Hawaii</option> 
 
    </optgroup> 
 
    <optgroup label="Pacific Time Zone"> 
 
    <option value="CA">California</option> 
 
    <option value="NV">Nevada</option> 
 
    <option value="OR">Oregon</option> 
 
    <option value="WA">Washington</option> 
 
    </optgroup> 
 
    <optgroup label="Mountain Time Zone"> 
 
    <option value="AZ">Arizona</option> 
 
    <option value="CO">Colorado</option> 
 
    <option value="ID">Idaho</option> 
 
    <option value="MT">Montana</option> 
 
    <option value="NE">Nebraska</option> 
 
    <option value="NM">New Mexico</option> 
 
    <option value="ND">North Dakota</option> 
 
    <option value="UT">Utah</option> 
 
    <option value="WY">Wyoming</option> 
 
    </optgroup> 
 
    <optgroup label="Central Time Zone"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="AR">Arkansas</option> 
 
    <option value="IL">Illinois</option> 
 
    <option value="IA">Iowa</option> 
 
    <option value="KS">Kansas</option> 
 
    <option value="KY">Kentucky</option> 
 
    <option value="LA">Louisiana</option> 
 
    <option value="MN">Minnesota</option> 
 
    <option value="MS">Mississippi</option> 
 
    <option value="MO">Missouri</option> 
 
    <option value="OK">Oklahoma</option> 
 
    <option value="SD">South Dakota</option> 
 
    <option value="TX">Texas</option> 
 
    <option value="TN">Tennessee</option> 
 
    <option value="WI">Wisconsin</option> 
 
    </optgroup> 
 
    <optgroup label="Eastern Time Zone"> 
 
    <option value="CT">Connecticut</option> 
 
    <option value="DE">Delaware</option> 
 
    <option value="FL">Florida</option> 
 
    <option value="GA">Georgia</option> 
 
    <option value="IN">Indiana</option> 
 
    <option value="ME">Maine</option> 
 
    <option value="MD">Maryland</option> 
 
    <option value="MA">Massachusetts</option> 
 
    <option value="MI">Michigan</option> 
 
    <option value="NH">New Hampshire</option> 
 
    <option value="NJ">New Jersey</option> 
 
    <option value="NY">New York</option> 
 
    <option value="NC">North Carolina</option> 
 
    <option value="OH">Ohio</option> 
 
    <option value="PA">Pennsylvania</option> 
 
    <option value="RI">Rhode Island</option> 
 
    <option value="SC">South Carolina</option> 
 
    <option value="VT">Vermont</option> 
 
    <option value="VA">Virginia</option> 
 
    <option value="WV">West Virginia</option> 
 
    </optgroup> 
 
</select>