select2 v4 für die Live-Suche - Möglichkeit zur Auswahl aus Dropdown-Liste oder reichen Sie das Stichwort

Question

Ich baue Live-Suche. In meinem Beispiel möchte ich GitHub-Repositories mit Select2 durchsuchen können. Ich muss ein Repository aus dem Dropdown-Menü auswählen können und der Browser sollte zum ausgewählten Repository navigieren. Es sollte auch möglich sein, das eingegebene Schlüsselwort durch Drücken der Taste Senden Schaltfläche oder Geben Sie den Schlüssel ein und navigieren Sie zur GitHub Suchseite und sehen Sie dort die Suchergebnisse.

DIE PROBLEME

• I Geben Sie nicht abfangen können Schlüssel
• kann ich nicht die keywoard bekommen eingegeben JQuery verwenden, wenn Taste Senden

WAS habe ich versucht,

Ich habe versucht, Ereignisse an SELECT-Element binden, habe auch viele Beispiele von stackoverflow.com ausprobiert, aber die Beispiele haben nicht funktioniert (vielleicht wegen der verschiedenen Select2-Version).

Ist das möglich?

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

können Sie den Ajax-Aufruf, um den Wert des letzten Schlüsselwort zu halten. Und verwenden Sie das Auswahlereignis, um auf die ausgewählten Daten zuzugreifen. Verwenden Sie das Ereignis change, um die Eingabetaste zu erfassen.

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>