We Keep Coding

live search add a href to results

I have a live search in laravel 7
everything works good
but I cant add (href a tag) to result list
because result show in select option (select2 library) without (a) tag and cant be open in a new page for see result for this keyword
my blade:
<div class="fre-search-wrap">
<select class="livesearch form-control" name="Find Consultants"></select>
</div>
my scripst:
<script type="text/javascript">
$('.livesearch').select2({
placeholder: 'Select Consultants',
ajax: {
url: '/live_search/action',
dataType: 'json',
delay: 550,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.title,
id: item.id
}
})
};
},
cache: true
}
});
the main source was this
https://www.positronx.io/laravel-autocomplete-search-with-select2-example/

Hello guy you can use this to add a tag:
$('.livesearch').select2({
placeholder: 'Select Consultants',
ajax: {
url: '/live_search/action',
dataType: 'json',
delay: 550,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: ""+item.title+"", // a tag
id: item.id
}
})
};
},
cache: true
}
});

Use ajax to populate select2 only on open

I'm using the following code to fetch options from a database and populate a select2 on open. It works pretty well, but as soon as I start typing in the select2 search input box it also searches via the same ajax function. How can I just populate every time it opens, but then leave it there as long as it's opened?
Also since I'm using it to create tags I lost the ability to auto-select the new tag when I attached the ajax part, so instead of typing and pressing enter to add a tag, it's now stuck in search-land and I have to click on the newly created tag manually if I want it to be selected.
Any ideas?
function formatMenu (data) {
if (!data.id) { return data.text; }
var $data = $(
'<nobr>' + data.text + '</nobr>'
);
return $data;
};
$('select').select2({
templateSelection: formatMenu,
dropdownCssClass: 'select2-menu',
dropdownParent: $('#parent'),
placeholder: '-',
tags: true,
allowClear: true,
ajax: {
url: "?ajax=get_data,
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: false
},
sorter: function(data) {
return data.sort(function (a, b) {
a = a.text.toLowerCase();
b = b.text.toLowerCase();
if (a > b) {
return 1;
} else if (a < b) {
return -1;
}
return 0;
});
},
createTag: function (params) {
return {
id: params.term,
text: params.term
}
}
});

Select2 - infinite scroll not loading next page with remote data

I am using Select2 4.0.1, I have used ajax to populate the result based on users input, but whenever I search for anything select2 lists first page result, but consecutive pages were not loading, also request is made for 2nd page on scroll. seems to be I am missing something.
$multiselect = $(element).select2({
closeOnSelect: false,
multiple: true,
placeholder: 'Assign a new tag',
tags: true,
tokenSeparators: [","],
ajax: {
url: '/search_url',
dataType: 'json',
type: 'GET',
delay: 250,
data: function(params) {
return {
search: params.term,
page: params.page
};
},
processResults: function(data, params) {
var more, new_data;
params.page = params.page || 1;
more = {
more: (params.page * 20) < data.total_count
};
new_data = [];
data.items.forEach(function(i, item) {
new_data.push({
id: i.name,
text: i.name
});
});
return {
pagination: more,
results: new_data
};
},
cache: true
}
})
Any help is much appreciated.Thnx:)

This is the code I got working last week. I am using a different transport on my end, but that shouldn't make a difference. I was having the same issue as you regarding the lack of paging working while scrolling. My issue ended up being that I didn't have the proper {'pagination':{'more':true}} format in my processResults function. The only thing I can see that may work for you is to "fix" the page count in the data function vs. the processResults function.
When you scroll to the bottom of your list, do you see the "Loading more results..." label? Have you attempted to hard code the more value to true while debugging?
this.$(".select2").select2({
'ajax': {
'transport': function (params, success, failure) {
var page = (params.data && params.data.page) || 1;
app.do('entity:list:search',{'types':['locations'],'branch':branch,'limit':100,'page':page,'term':params.data.term})
.done(function(locations) {
success({'results':locations,'more':(locations.length>=100)});
});
}
, 'delay': 250
, 'data':function (params) {
var query = {
'term': params.term
, 'page': params.page || 1
};
return query;
}
, 'processResults': function (data) {
return {
'results': data.results
, 'pagination': {
'more': data.more
}
};
}
}
, 'templateResult': that.formatResult
, 'templateSelection': that.formatSelection
, 'escapeMarkup': function(m) { return m; }
});

two ajax request url (success/fail)

Good day,
I was in some disarray . I have a ajax request from select2. Also I have two urls. How should I event organized If / else success/failure statements, if suddenly one will not work , then send an inquiry to another link?
I'm trying again and again and alwas there is error somewhere((
$(".js-data-example-ajax").select2({
language: "ru",
placeholder: "Serach.........",
disabled: false,
selected: true,
ajax: {
url: "url_1",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term + "%", // search term
};
},
processResults: function (data) {
if (data.features.length > 0) {
var resultArray = [];
$.each(data.features, function (index, value) {
value.attributes.id = value.attributes.OBJECT_ID;
resultArray.push(value.attributes);
});
return {
results: resultArray
};
} else {
return []
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 5,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

It should be quite simple because you only have to call the first url and, on error, call the second.
$.ajax(function(data){
url: "url_1",
...,
success(function(data){
//do stuff on success
}),
error(function(e){
$.ajax(function(data{
//call the second url
})
})
})

Select2 preloaded tags in Select2 input box

I have a Select2 input that is working great. The user can start typing and select an option from the dropdown menu and it adds a tag into the input field, they can also create their own tags thanks to the createSearchChoice function.
My scenario is when a user types in a customer's name who already exists, it locks on, and I want it to populate the field with tags (usual suppliers). The user can then delete or add more tags if they want.
My code is:
$('#usualSuppliers').select2({
containerCssClass: 'supplierTags',
placeholder: "Usual suppliers...",
minimumInputLength: 2,
multiple: true,
placeholder: 'Usual suppliers...',
createSearchChoice: function(term, data) {
if ($(data).filter(function() {
return this.name.localeCompare(term) === 0;
}).length === 0) {
return {id: 0, name: term};
}
},
id: function(e) {
return e.id + ":" + e.name;
},
ajax: {
url: ROOT + 'Ajax',
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
call: 'Record->supplierHelper',
q: term
};
},
results: function(data, page) {
return {
results: data.suppliers
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id: item[0],
title: item[1]
});
});
//$(element).val('');
callback(data);
}
});
How can I make it pre-populate the input with tags that come in from an Ajax request?

I managed to solve the issue thanks to this post:
Load values in select2 multiselect
By using trigger.