I use typehead for showing search suggestions and I am not sure to add how to add a link to these search results. Please let me know how to add links to each search suggestion.
var path = "{{ route('dental_business_autocompleteSearch') }}";
$('#search').typeahead({
href:"https://google.com",
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
},
});
Related
Is there anything we must write externally to perform search on a column. from demos i understand that no code is written , please help me out.
I have filtering:true, so that i have search boxes on each col , when i enter text and hit on enter button of keyboard or search icon nothing happens but it calls a REST-ful service which i have written to get data for grid
Following is my code
controller : {
loadData : function(filter) {
var d = $.Deferred();
$.ajax({
url : "myurl",
dataType : "json",
type : 'POST',
}).done(function(response) {
// client-side filtering
$.grep(response, function(project) {
return project.Name === filter.Name;
});
d.resolve({
data : response.project
});
});
return d.promise();
},
},
The first problem is $.grep doesn't change the source array, it returns the result of filtering.
Also be sure about data in response, since you filter the response while resolving deferred with response.project. Apply grep to the array of items.
Another thing is ensure the format of returning data, if pageLoading is false, the deferred should be resolved with the array of items (not { data: [items] }).
So depending on #2 and #3 the fixed code could be:
.done(function(response) {
var result = $.grep(response, function(project) {
return project.Name === filter.Name;
});
d.resolve(result);
});
Hope this will help.
When I fill search box, auto-completion doesn't work correctly. My query doesn't work.
Below is my html code:
$(document).ready(function(){
$('#keyword').autocomplete({
source: function( request, response ) {
$.ajax({
url : '/search',
dataType: "json",
data: {
username: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
id: '<B>' + item.id + '</B>',
value: item.value
}
}));
}
});
},
autoFocus: true,
minLength: 2,
select: function(event, ui) {
var url = ui.item.id;
if(url != '#') {
location.href = '/admin/users/' + url+ '/edit';
}
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
});
<input name="keyword" id="keyword" class="form-control txt-auto"/>
my function
public function search(Request $request) {
$keyword = $request->input('keyword');
$results = array();
$user = User::where('username', 'LIKE','%'.$keyword.'%')->get();
foreach ($user as $query)
{
$results[] = [ 'id' => $query->id, 'value' => $query->username ];
}
return Response::json($results);
}
Route::get( '/search' , 'ShopController#search' );
I know i'm late to the party but I had this exact issue.
The z-index needs to be added while loading of your html:
What I did was I added this to one of my css files:
.ui-autocomplete {
z-index:2147483647;
}
After that, the autocomplete started working.
I haven't used autocomplete in a while, but I see two problems in your code. First, according to the docs
The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.
Yet, you are using:
$keyword = $request->input('keyword');
instead of
$term = $request->input('term');
Second, maybe you need an ajax call inside the source option for something in particular, but you can simply do:
$('#keyword').autocomplete({
source: "/search",
select: function(event, ui) {
// ... do something here. Try logging the output
console.log(ui.item);
}
});
I'm trying to use the newest version of Select2 to query my site's API and return a multiple-select. It's fetching the right data and it's even formatting the dropdown properly, combining two keys in the returned objects as "(A-123) John Johnson", but the dropdown's not responding to mouseover or clicks.
I'm using the select2.full.min.js and select2.min.css files. For the purposes of the project, I'm including them in the directory and accessing them through Bundles in cshtml, instead of accessing them via a CDN.
HTML:
<div>
<select class="user-list" multiple="multiple" style="width: 100%">
</select>
</div>
At the moment, it's looking like this, which is how I want it:
Not sure if this is relevant, but when I browse the generated source code while searching, the input looks fine, but the dropdown's code is greyed out as though it were hidden.
Per other suggestions I've found on here and elsewhere, I've tried a few different solutions. I eventually found out how templateResult and templateSelection are supposed to work (not particularly thanks to the documentation), and tried returning the ID as well, but I still can't seem to actually select anything, or even get a response when I hover over the options.
Here's what I wound up with, including some debugging to make sure the returned object is valid.
JS:
// Setup autocomplete/select for User filter
$(".user-list").select2({
ajax: {
url: "[api url]",
type: "GET",
dataType: "json",
data: function (params) {
return {
search: params.term, // search term
page: params.page
};
},
processResults: function (data) {
console.log(JSON.stringify(data));
return {
results: data
};
},
},
escapeMarkup: function (markup) { return markup; },
id: function (data) { return data.Id.toString(); },
minimumInputLength: 1,
templateResult: function (data, page) {
return "(" + data.User + ") " + data.Name;
},
templateSelection: function (data, page) {
return "(" + data.User + ") " + data.Name;
}
})
The ID is a GUID, and there are two other fields, which I'll call Name and User.
Data Sample:
[
{
"Id":"a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1",
"Name":"John Johnson",
"User":"A-123"
},
{
"Id":"b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2",
"Name":"Tom Thompson",
"User":"B-456"
}
]
I hate to add to the pile of questions that seem to be about this, but most results I've found have been for the older version with significantly different options, and they just haven't worked for me yet.
The way select2 operates is that it uses the "id" values of each data object and puts those into the original Select element as the selected option(s). This is case-sensitive.
By default, it displays the dropdown options and the selected element by whatever the "text" value is of the data object. This does not allow for custom formatting.
If (like me) you want to return different data options, you still need to return a field as "id", or re-map a field to "id" in an object returned in the processResults option under ajax. Then use the templateResult and templateSelection settings with your other returned data to display what you want.
If you return and parse everything correctly except for the id, you may wind up with an otherwise functional list, but be unable to select any options.
The requirements for the dropdown changed a bit with my project, but here's where I wound up. It works fine the multiple="multiple" attribute added to to make it a multi-select, too.
<select class="select2" style="width:100%; height: 100%;">
<option></option>
</select>
$(".select2").select2({
ajax: {
url: "[api url]",
method: "get",
data: function (params) {
return {
search: params.term
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
placeholder: "Enter a User ID or Name",
templateResult: function(data) {
return "(" + data.user + ") " + data.name;
},
templateSelection: function(data) {
return "(" + data.user + ") " + data.name;
}
}).ready(function () {
$(".select2-selection__placeholder").text("Enter a User ID or Name")
})
It's possible part of my initial issue was all the attempts at implementing fixes for older versions of Select2, which had a completely different set of options/settings available.
Additionally, a bit of a side-note, the "placeholder" attribute doesn't currently work with custom templating. It tries to force the placeholder text into the Result format, which shows "(undefined) undefined" with this code. To fix it requires an empty option and to replace the text on select2.ready.
I had the same problem. Solution:
added this part :
_.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; });
(used underscore)
for my init
$(".js-data-example-ajax").select2({
ajax: {
url: "api/MyApi/MyApi",
method: "POST",
dataType: 'json',
delay: 250,
data: function (params) {
return {
SearchPart: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
_.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; });
return {
results: data.ResultObject,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
multiple: true,
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 3,
tags: true,
templateResult: self.Select2FormatData, // omitted for brevity, see the source of this page
templateSelection: self.Select2FormatDataSelection // omitted for brevity, see the source of this page
});
I'am trying to make an auto suggestion plugin, this suggest by relevance, popularity
and change color of found-keywords, display 5 different suggestions
I'm noob, plz help !
I could suggest the following example to search using ajax call. Only thing is your search item should be stored in database so you can retreive the information from the database as search item
$("#searchkeyWord").autocomplete({
source: function( request, response ) {
$.ajax({
url: "Path/searchByName",
dataType: "",
data: {querypatam: request.term},
success: function( data ) {
response( $.map( data.SearchResponse, function( item ) {
return {
id:item.id,
label: item.Name,
value: item.id
}
}));
}
});
},
select: function( event, ui ) {
var name_no_html=ui.item.label.replace('<b>','');
var name_no_html=name_no_html.replace('</b>','');
$("#searchkeyWord").val(name_no_html);
$("#searchkeyWord_value").val(ui.item.id);
return false;
},
minLength: 3 // can increase or decrease your term to be searched
});
I am having trouble implementing the Twitter Bootstrap Typeahead feature with a JSON web Service.
I have looked at all the examples on this website and can't find anything that will work. I know my JSON web service works; I can enter the address in my browser and it returns the JSON I expect with the MIME type set to "application/json".
I have this JavaScript in the
<body>
of my HTML page:
<script>
$('#typeahead').typeahead({
source: function (query, process) {
return $.getJSON(
'http://localhost:8732/IngredientsService/search/',
{ query: query },
function (data) {
return process(data);
});
}
});
</script>
I have this code as my "input":
<input type='text' id='typeahead' class='typeahead' data-provide="typeahead" data-items="10" />
Can anyone explain why this is not working?
According to the last comment ("web service not being accessed") - have you tried the more normal / documented approach?
$('#typeahead').typeahead({
source: function (query, process) {
return $.get('http://localhost:8732/IngredientsService/search/', { query: query }, function (data) {
return process(data.options); //if JSON is [ "options" : { ...}
});
}
});
$.getJSON is not nessecary, but useful when you want to load an entire JSON and inject potion of it as a source for the typeahead
$.getJSON("http://localhost:8732/IngredientsService/search/", function(json) {
$("#typeahead").typeahead({
source : json.options //again, dont know the structure of the JSON
});
});
From what I can see from the typeahead documentation, the source key in the parameters object is not valid.
It should look more like this I think:
$('#typeahead').typeahead({
remote: 'http://localhost:8732/IngredientsService/search/q=%QUERY'
});
http://jsfiddle.net/qVjsu/
It's better to omit return when using async sources because process() will be triggered twice
$('#typeahead').typeahead({
source: function (query, process) {
$.getJSON('/search/json/'+ query), function (data) {
return process(data);
});
},
minLength: 1,
items: 8
});