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
}
});

Multiple selectize - populate with value from database

In one page I have multiple selectize select with same name.
I can`t populate the selectize with value from database. (At the beginning the select is empty because I have 40k values in database).
This is a javascript code: (work only when I search in select)
$('.nume_medicament').selectize({
valueField: 'nume_medicament',
labelField: 'nume_medicament',
searchField: 'nume_medicament',
options: [],
create: false,
render: {
option: function(item, escape) {
return '<option datacod="'+item.cod_medicament+'" value="'+item.id_medicament+'">'+item.nume_medicament+'</option>';
},
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: site_url + "medicmed/get_medicamente_by_search",
type: 'GET',
dataType: 'json',
data: {
name: query,
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
},
});
And this is html file:
<select name="nume_medicament" class="nume_medicament checkmed selectizedefault">
<option selected datacod="<?=$pm->cod_medicament?>" value="<?=$pm->id_medicament?>"><?=$pm->nume_medicament?></option>
</select>
A want to assign the option when I enter in the page.
Thank you!!

Select2 dropdown menu (ajax,initSelection) error "options.results is not a function"

I am using select2 plugin(ivaynberg.github.io/select2).
I am trying to display a dropdown(select).
Data getting via ajax, for this I create 2 servlets.
Dropdown menu url: '/testPr1/servlet1'
Return:
[{"id":1,"text":"Genre1"},{"id":2,"text":"Genre2"},{"id":3,"text":"Genre3"},{"id":4,"text":"Genre4"}]
Init data url: '/testPr1/servlet2'
Return:
[{"id":1,"text":"Genre1"},{"id":2,"text":"Genre2"}]
I create hidden element for select2 (and set init value)
Select film genre from list:
<input type="hidden" id="film_genre_cbox" style="width:600px" value="1,2" />
Then I get started with creating dropdown
var select_config2 = {
minimumInputLength: 0,
allowClear: true,
placeholder: "Select film genre",
tags: true,
ajax: {
url: '/testPr1/servlet1',
dataType: 'json',
type: "GET",
quietMillis: 0,
data: function (term) {
return {
term: term
};
},
initSelection: function (element, callback) {
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.text,
id: item.id
}
})
};
}
}
};
$("#film_genre_cbox").select2(select_config2);
It works well, select exclude Genre1 and Genre2 as init value
But I want to see these two genres as selected elements in input, like this:
And then I tried to init select2 via ajax
var select_config1 = {
minimumInputLength: 0,
allowClear: true,
placeholder: "Select film genre",
tags: true,
ajax: {
url: '/testPr1/servlet1',
dataType: 'json',
type: "GET",
quietMillis: 0,
data: function (term) {
return {
term: term
};
}
},
initSelection: function (element, callback) {
var id = $(element).val();
// alert(id.toString());
if (id !== "") {
$.ajax({
url:'/testPr1/servlet2',
dataType: "json",
type: "GET",
quietMillis: 0,
}).done(function(data) {
alert(data.toString());
return callback(data);
});
} else {
callback([]);
}
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.text,
id: item.id
}
})
};
}
};
$("#film_genre_cbox").select2(select_config1);
As result I get init selection as want
But when I start to dropdown I get no menu (Genre3,Genre4)
and error “Uncaught TypeError: options.results is not a function”.
Libs that I use
jquery-2.1.4.js
/select2_v3.5/select2.js
select2_v3.5/select2.css
Where is the mistake?

selectize doesn't render inside dropdown

I'm trying to use selectize.js to populate a text box from a database based on user input, but it's not rendering inside the dropdown. I'm getting the correct data from the database, but not sure how to get it to render. Maybe the JSON isn't formed correctly?
Here's the JS:
var $select = $('#tags').selectize({
delimiter: ',',
persist: false,
valueField: 'PKID',
labelField: 'TAG',
searchField: ['TAG'],
maxOptions: 10,
create: true,
render: {
option: function (item, escape) {
return '<div>' + escape(item.TAG) + '</div>';
}
},
load: function (query, callback) {
if (!query.length) return callback();
$.ajax({
url: '/components/nl',
type: 'POST',
dataType: 'json',
data: {
method: 'getTags',
tag: query,
maxresults: 10
},
error: function () {
callback();
},
success: function (res) {
callback(res);
}
});
}
});
Here's the input box:
<input id="tags" class="selectize" type="text" name="tags" value="" placeholder="Tags separated by commas (optional)">
Here's what's being returned if the person starts to type in "straw".
{"COLUMNS":["PKID","TAG"],"DATA":[[1475,"strawberries"]]}
This is exactly what it should return, but not sure why I don't see "strawberries" as a choice in the dropdown. I only see "straw" which is what I have typed.

The problem was the code was expecting:
[{"PKID":1475,"TAG":"strawberries"}]
But I was giving it:
{"COLUMNS":["PKID","TAG"],"DATA":[[1475,"strawberries"]]}

JSON + PHP + JQuery + Autocomplete problem

Only started today but I'm having massive problems trying to understand JSON/AJAX etc, I've gotten my code this far but am stumped on how to return the data being pulled by the AJAX request to the jQuery Auto complete function.
var autocomplete = new function() {
this.init = function() {
$('#insurance_destination').autocomplete({
source: lookup
});
}
function lookup() {
$.ajax({
url: "scripts/php/autocomplete.php",
data: {
query: this.term
},
dataType: "json",
cache: false,
success: function(data) {
for (key in data) {
return {
label: key,
value: data[key][0]
}
}
}
});
}
}
And example of the JSON string being returned by a PHP script
{
"Uganda": ["UGA", "UK4", "Worldwide excluding USA, Canada and the Carribbean"]
}

Normally, you don't have to do ajax query yourself:
$('#insurance_destination').autocomplete('url_here', {options_here});
That's assuming we're talking about standard jquery autocomplete plugin. Do I understand you correctly?
edit
Check api
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
There are also some examples.

This is the code I've ended up with, it works in Chrome and Firefox but not in IE 6/7...
var autocomplete = new function (){
this.init = function() {
$('#insurance_destination').autocomplete({
source: function(request, response) {
debugger;
$.ajax({
url: "scripts/php/autocomplete.php",
dataType: "json",
data: {query:this.term},
success: function(data) {
response($.map(data.countries, function(item) {
return {
label: '<strong>'+item.name+'</strong>'+' '+item.description,
value: item.name,
code : item.region
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
$('#insurance_iso_code_hidden').val(ui.item.code);
},
open: function() {
},
close: function() {
}
});
}
}