Can't select item with select2 V4

[fire...@gmail.com]

the code :
<div class="col-xs-7">
<select class="js-data-example-ajax form-group col-xs-12">
</select>
</div>

<script type="text/javascript">
var formatRepo =function (repo){
if (repo.loading) return repo.text;
var markup = repo.name +'-'+repo.natrualkey;
return markup;
}

var formatRepoSelection =function (repo){
return repo.name||repo.natrualkey;
}

$(function () {
$('.js-data-example-ajax').select2({
// placeholder:"选择供应商...",
// multiple: true,
ajax: {
url: "../../../system/customer/select",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},

processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
}
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
})
</script>

[Kevin Brown]

Considering you appear to be using a different property for the text of your results, you most likely aren't using the `id` property for the identifier.

It's required in results, and without it you will not able to select the result. The link (also in the 4.0 announcement) provides a method that will allow you to re-map the field on the frontend if you cannot do it in your api.

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at http://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[Electric Bikes Backlinks]

You can simplify this setup a bit and avoid common Select2 issues by ensuring your AJAX response keys match what Select2 expects (id and text). Also, your use of escapeMarkup is correct since you’re returning custom markup, but be careful with special characters to prevent rendering errors. For similar developer-friendly tools and utilities that help streamline UI integrations and testing workflows, you can explore resources like https://thelulubox.com/ which often shares useful insights for optimizing interactive app components.  

[Electric Bikes Backlinks]

A clean and practical Select2 AJAX setup. The use of templateResult and templateSelection makes the dropdown much more readable, especially when combining multiple fields like name and key. Also, keeping escapeMarkup overridden is important when you want full control over rendering. For developers who work a lot with UI customization and previews, tools like https://proreminiapp.com/ can also be handy when refining visual assets alongside frontend components.  

On Saturday, 13 June 2015 at 07:47:47 UTC+5 Kevin Brown wrote: