select2 v4ライブ検索 - ドロップダウンから選択するか、キーワードを送信する

Question

ライブ検索を構築中です。下の私の例では、Select2を使ってGitHubリポジトリを検索できるようにしたいと考えています。私はドロップダウンからリポジトリを選択する能力が必要であり、ブラウザは選択されたリポジトリにナビゲートする必要があります。 Submitボタンまたはキーを入力し、GitHub検索ページに移動して検索結果を表示して、入力したキーワードを送信することもできます。

THE PROBLEMS

• 私は私がしようとした

  を試してみましたWHATボタン

を提出押したとき、私はjQueryのを使用してkeywoard入力することができませんキー

を入力傍受することはできませんイベントをSELECT要素にバインドし、またstackoverflow.comから多くの例を試しましたが、例が機能しませんでした（異なるSelect2バージョンのためかもしれません）。

これは可能ですか？あなたが最後のキーワードの値を保持するために、AJAX呼び出しを使用することができます

https://jsfiddle.net/gpson/2tyu6p9k/

$(function() { 
    var $q = $('#select2'); 
    $q.select2({ 
     multiple: true, 
     tags: true, 
     closeOnSelect: true, 
     //selectOnClose: true, 
     ajax: { 
      url: "https://api.github.com/search/repositories", 
      dataType: 'json', 
      delay: 250, 
      data: function (params) { 
       return { 
        q: params.term, // search term 
        page: params.page 
       }; 
      }, 
      processResults: function (data, params) { 
       params.page = params.page || 1; 
       return { 
        results: data.items, 
        pagination: { 
         more: (params.page * 30) < data.total_count 
        } 
       }; 
      }, 
      cache: true 
     }, 
     escapeMarkup: function (markup) { return markup; }, 
     minimumInputLength: 1, 
     templateResult: function (result) 
     { 
      return result.full_name; 
     }, 
     templateSelection: function (result) 
     { 
      return result.full_name || result.text; 
     } 
    }); 

    $q.on('select2:selecting', function(e) 
    { 
     //window.location.href = '/contacts/show/' + e.params.args.data.html_url ; 
     console.log(e.params.args.data.html_url); 
     //console.log($('#select2').val()); 
     //$q.select2("close"); 
     return false; 
    }); 

}); 

Answer 1

。選択イベントを使用して、選択したデータにアクセスします。 changeイベントを使用してEnterキーを取得します。

var $q = $('#select2'); 
 
var where = ''; 
 
var keyword = ''; 
 

 
$q.select2({ 
 
    tags: true, 
 
    closeOnSelect: true, 
 
    //selectOnClose: true, 
 
    ajax: { 
 
    url: "https://api.github.com/search/repositories", 
 
    dataType: 'json', 
 
    delay: 250, 
 
    data: function(params) { 
 
     /*get the last keyword on the ajax call*/ 
 
     keyword = params.term; 
 
     return { 
 
     q: params.term, // search term 
 
     page: params.page 
 
     }; 
 
    }, 
 
    processResults: function(data, params) { 
 
     params.page = params.page || 1; 
 
     return { 
 
     results: data.items, 
 
     pagination: { 
 
      more: (params.page * 30) < data.total_count 
 
     } 
 
     }; 
 
    }, 
 
    cache: true 
 
    }, 
 
    escapeMarkup: function(markup) { 
 
    return markup; 
 
    }, 
 
    minimumInputLength: 1, 
 
    templateResult: function(result) { 
 
    return result.full_name; 
 
    }, 
 
    templateSelection: function(result) { 
 
    return result.full_name || result.text; 
 
    } 
 
}); 
 

 

 
$q.on('select2:selecting', function(e) { 
 
    /*set the where during the selection process*/ 
 
    where = e.params.args.data.html_url; 
 
}); 
 
$q.change(func); 
 
document.getElementById('submit').onclick = function() { 
 
    alert('submit was clicked where: ' + where + ' keyword: ' + keyword); 
 
}; 
 

 
function func() { 
 
    /*use the change event to triger the updates*/ 
 
    document.getElementById('where').innerText = where; 
 
    document.getElementById('keyword').innerText = keyword; 
 
}

select { 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/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.2/js/select2.min.js"></script> 
 
<select id="select2"></select> 
 
<button id="submit">submit</button> 
 
<h6> 
 
    where 
 
    </h6> 
 
<p id="where"> 
 

 
</p> 
 
<h6> 
 
    keyword 
 
    </h6> 
 
<p id="keyword"> 
 

 
</p>