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:

[Phill Jones]

Bus Simulator Indonesia provides an upgraded simulation experience with extra features that make gameplay more flexible and enjoyable. Players can explore authentic Indonesian locations, customize their buses, and enjoy smoother driving mechanics. It’s ideal for those who want a more open and entertaining take on realistic bus driving.

[M.philPhysics 2024]

Thanks for sharing this discussion — it’s always helpful to see how others approach implementation details and edge cases. Threads like this are great for understanding real-world usage and improving workflows, especially when working with dynamic selection components.

Outside of development work, I also spend time exploring simulation projects and related communities, such as Bus Simulator Ultimate, where user feedback and feature updates play a big role in ongoing improvements. Appreciate everyone’s insights here — very informative conversation.