Menu
Ok, I'm sure there's something simple set wrong here but I'm not 100% what it is.
So I am trying to use Select2 AJAX method as a way of users to search a database and select a result. The call itself is coming back with results, however it will not allow me to select the answer from the list. It also doesn't seem to allow you to "select" it on hover or up/ down arrow. So without further ado, here is my code:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" /> <script src="select2/select2.js"></script> <script src="select.js"></script> </head> <body> <input type="text" style="width: 500px" class="select2"> </body> </html> jQuery(function() { var formatSelection = function(bond) { console.log(bond) return bond.name } var formatResult = function(bond) { return '<div class="select2-user-result">' + bond.name + '</div>' } var initSelection = function(elem, cb) { console.log(elem) return elem } $('.select2').select2({ placeholder: "Policy Name", minimumInputLength: 3, multiple: false, quietMillis: 100, ajax: { url: "http://localhost:3000/search", dataType: 'json', type: 'POST', data: function(term, page) { return { search: term, page: page || 1 } }, results: function(bond, page) { return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)} } }, formatResult: formatResult, formatSelection: formatSelection, initSelection: initSelection }) }) { error: null, results: [ { name: 'Some Name', _id: 'Some Id' }, { name: 'Some Name', _id: 'Some Id' } ] } Everything seems to pull in correctly, however I am unable to actually select the answer and have it input into the box. Is there a problem somewhere in my code?
513
After looking at another answer it would seem I need to also pass id field with every call, otherwise it will disable the input.
Sample code that fixed it:
$('.select2').select2({ placeholder: "Policy Name", minimumInputLength: 3, multiple: false, quietMillis: 100, id: function(bond){ return bond._id; }, ajax: { url: "http://localhost:3000/search", dataType: 'json', type: 'POST', data: function(term, page) { return { search: term, page: page || 1 } }, results: function(bond, page) { return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)} } }, formatResult: formatResult, formatSelection: formatSelection, initSelection: initSelection }) Since this keeps getting upvoted I'll elaborate a bit. The .select2() method expects a unique id field on all results. Thankfully, there's a workaround. The id option accepts a function like this:
function( <INDIVIDUAL_RESULT> ) { // Expects you to return a unique identifier. // Ideally this should be from the results of the $.ajax() call. } Since my unique identifier was <RESULT>._id, I simply return <RESULT>._id;
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With