can't seem figure out problem here. worked fine when using 3.5, not work 4.0.
i using select2.full.js supports using input in manner.
html:
<input id="vcreate-filter" type="text" name="settings[filter]" class="form-control" style="width:100%;"/> js:
$("#vcreate-filter").select2({ placeholder: "select or enter application...", allowclear: true, multiple: false, ajax: { datatype: 'json', delay: 1000, type: 'post', url: '/process/get_application_list.php', data: function (term, page) { return { term: term, // search term page_limit: 25, // page size page: page // page number }; }, results: function (data, page) { var more = (page * 25) < data.total; // whether or not there more results available return { results: data.results, more: more }; } }, createsearchchoice:function(term, data) { if ($(data).filter(function() { return this.text.localecompare(term)===0; }).length===0) { return {id:term, text:term}; } } }).on('change', function() { $(this).valid(); }); get_application_list.php:
....... $results = $stmt->fetchall(pdo::fetch_assoc); // make sure there results else null query returned if( count($results) > 0 ) { foreach( $results $row ) { $ajax_result['results'][] = array( 'id' => htmlspecialchars($row['event_target'], ent_quotes, 'utf-8'), 'text' => htmlspecialchars($row['event_target'], ent_quotes, 'utf-8') ); } } else { // 0 results send message so. $ajax_result['results'][] = array( 'id' => 0, 'text' => 'no results found...' ); } // return result array ajax echo json_encode($ajax_result);
html: use select element instead of input.
<select id="vcreate-filter" type="text" name="settings[filter]" class="form-control" style="width:100%;"> </select>` js: use processresults instead of 'results' callback property.
processresults: function (data, page) { var more = (page * 25) < data.total; // whether or not there more results available return { results: data.results, more: more }; } assuming json in correct format [{"id": "1", "text": "one"}, {"id": "2", "text": "two"}]
breaking changes seems documented here.
