I have a search input field - where when the user search for any string it will show up the autocomplete dropdown. But, for some reason it is not showing up the autocomplete dropdown. But when I locate my base url and end with /JobSearchItem.xhtml path in my address bar it will just return my json formatted result. But, it does not show any autocomplete dropdown. Can anyone check of how I can make my autocomplete to show. thanks.
PS: Let me know if you guys need me to show any more code.
Here is my code:
$(function() {
var base_url = "http://localhost:8080/myapp/";
$( "#searchTextField" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: base_url + "JobSearchItem.xhtml",
dataType: "json",
data: {
q: request.searchValue
},
success: function( data ) {
response( $.map(data, function(v,i) {
return { jobClassCD: v.jobClassCD, jobClassTitle: v.jobClassTitle };
})
);
}
});
});
});
json response
[{"jobClassCD":"1000","pGrade":"0","jobGroup":"","jobClassTitle":"ABC DEVELOPER"}
You can try to do like this instead:
$(function() {
var base_url = "http://localhost:8080/myapp/";
$.ajax({
url: base_url + "JobSearchItem.xhtml",
dataType: "json",
data: {
q: request.searchValue
},
success: function(data) {
var newAray = $.map(data, function(v, i) {
return {
jobClassCD: v.jobClassCD,
jobClassTitle: v.jobClassTitle
};
$("#searchTextField").autocomplete({
source: newArray
});
});
}
});
});
Related
I'm trying to make a project similar to Google's search bar using Flask, Elasticsearch and jQuery that will automatically suggest based on input given and also automatically give correct suggestions when a wrong input is given. I've had success with the autosuggestion with correct spellings but when giving a wrong input, the correct suggestion data from Elasticsearch comes up in browser console but doesn't appear in the autocomplete drop-down. I inserted data into Elasticsearch using PySpark. I think the problem is related to the JS file but don't know if it's my JS file or the jquery-ui file. What am I doing wrong?
JS:
$(document).ready(function () {
const $source = document.querySelector('#source');
const $result = document.querySelector('#result');
const typeHandler = function (e) {
$result.innerHTML = e.target.value;
console.log(e.target.value);
$.ajax({
url: "/ajax_call",
type: 'POST',
dataType: 'json',
data: { 'data': e.target.value },
success: function (html) {
var data = html.aggregations.auto.buckets
var bucket = []
$.each(data, (index, value) => {
bucket.push(value.key)
});
console.log(bucket)
$("#source").autocomplete({
source: bucket
});
}
});
}
$source.addEventListener('input', typeHandler)
});
Correct Input:
Incorrect Input:
Correct data for Incorrect Input
Consider the following example.
$(function() {
const $source = $('#source');
const $result = $('#result');
$source.autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax_call",
type: 'POST',
dataType: 'json',
data: {
'data': request.term
},
success: function(html) {
var data = html.aggregations.auto.buckets;
var bucket = [];
$.each(data, (index, value) => {
bucket.push(value.key);
});
console.log(bucket);
response(bucket);
}
});
}
});
});
See More:
https://jqueryui.com/autocomplete/#remote-jsonp
https://api.jqueryui.com/autocomplete/#option-source
I'm trying to implement the EasyAutoComplete plugin on a field based on the value filled in another field, using ajax requests.
I have a customerid field and when it's value changes, I want the productname field to show all products related to that customerid using the EasyAutoComplete plugin.
Here is what I have so far:
$('#customerid').on('change',function() {
var products2 = {
url: function(phrase) {
return "database/FetchCustomerProducts.php";
},
ajaxSettings: {
dataType: "json",
method: "POST",
data: {
dataType: "json"
}
},
preparePostData: function(data) {
data.phrase = $("#customerid").val();
return data;
},
getValue: "name",
list: {
onSelectItemEvent: function() {
var value = $("#productname").getSelectedItemData().id;
$("#productid").val(value).trigger("change");
},
match: {
enabled: true
}
}
};
$("#productname").easyAutocomplete(products2);
});
Contents of FetchCustomerProducts.php:
if(!empty($_POST["customerid"])){
$products = $app['database']->Select('products', 'customerid', $_POST['customerid']);
echo json_encode(['data' => $products]);
}
However it's not working. The code is based on the 'Ajax POST' example found on this page.
you can using element select category add is class "check_catogory"
after using event click element select get value is option, continue send id to ajax and in file php, you can get $_POST['id'] or $_GET['id'], select find database,after echo json_encode
$("#customerid").change(function(){
var id = $(this).val();
if(id!=""){
$.ajax({
url:"database/FetchCustomerProducts.php",
type:"POST",
data:{id:id},
dataType: "json",
cache:false,
success:function(result){
var options = {
data:result,
getValue: "name",
list: {
onSelectItemEvent: function() {
var value = $("#productname").getSelectedItemData().id;
$("#productid").val(value).trigger("change");
},
match: {
enabled: true
}
}
};
$("#productname").easyAutocomplete(options);
}
})
}
});
I am trying to fetch company name in textbox as autocomplete. When I run my project, Ajax will call the success function, and the record is also fetched correctly, but there are no autocomplete suggestions in the textbox.
My view is:
$("#idcompanyname").autocomplete({
source: function (request, response) {
var customer = new Array();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '#Url.Action("Companymap", "admin")',
data: "{'term':'" + document.getElementById('idcompanyname').value + "'}",
dataType: "json",
success: function (data) {
alert(data)
response($.map(data, function (v, i) {
var text = v.vcCompanyName;
alet(text)
if (text && (!request.term || matcher.test(text))) {
return {
label: v.vcCompanyName,
value: v.kCompanyId
};
}
}));
},
error: function(result) {
alert("No Match");
}
});
}
});
}
Here is Method on controller:
var query = db.tbaccounts.Where(t => t.vcCompanyName.ToLower()
.StartsWith(term)).ToList();
List<string> lst = new List<string>();
foreach (var item in query)
{
lst.Add(item.vcCompanyName);
}
return Json(lst, JsonRequestBehavior.AllowGet);
Here is the referred Javascript:
<script src="~/script/jquery-2.0.3.js"></script>
<script src="~/script/jquery-ui.js"></script>
<script src="~/js/jquery-1.10.2.js"></script>
<script src="~/js/jquery-ui.js"></script>
Please try removing
~/script/jquery-2.0.3.js
from the script references in your application, and that should work for you....
I'm trying to use autocomplete for getting movie suggestion from rottentomatoes in JSON format.
But the code below doesn't show any suggestion.
<script>
var apikey = "5xq9w7z2mp7a6cnchkfy52yd";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = "Rocky";
$(document).ready(function() {
$("#sample").autocomplete({
source: function( request, response ) {
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp",
success: function(data) {
var movies = data.movies;
response(function(movies) {
return {
label: movies.title,
value: movies.title
}
}));
}
});
}
});
});
</script>
For the complete page source: https://gist.github.com/2018447
I also need to include the movie thumbnail in the suggestion list. Could anyone help me on this?
You had a syntax error (extra )) and were missing the call to iterate over the movies array (typically using $.map()).
This is what it should look like (update: includes poster thumbnails)
$("#sample").autocomplete({
source: function( request, response ) {
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies.json", {
data: {
apikey: apikey,
q: request.term
},
dataType: "jsonp",
success: function(data) {
response($.map(data.movies, function(movie) {
return {
label: movie.title,
value: movie.title,
thumb: movie.posters.thumbnail
}
}));
}
});
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
var img = $("<img>").attr("src", item.thumb);
var link = $("<a>").text(item.label).prepend(img);
return $("<li>")
.data( "item.autocomplete", item )
.append(link)
.appendTo(ul);
};
Working example here - http://jsfiddle.net/df7tp/6/
I'm using Jquery UI's autocomplete, and I can see the proper JSON data coming back in Firebug. However, nothing's coming back to the textbox.
My JavaScript:
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
}
$("#tags").autocomplete({
source: function(request, response){
$.ajax ({
url: "/projectlist",
dataType: "json",
data: {style: "full", maxRows: 12, term: request.term}
});
}
})
});
You can see that from the snippet JSON data is being returned. But nothing is being displayed in the results table. Which should look like the the JQuery autocomplete example JQuery Autocomplete
Noyhing is displayed because you return nothing i think: you must add e success function to your ajax call (i added an example of a success response, if you tell us how your json is tructured i could help you better. in any case you must return an array of objects, and each object should have a property named 'label' and one named 'value':
$("#tags").autocomplete({
source: function(request, response) {
$.ajax({
url: "/projectlist",
dataType: "json",
data: {
style: "full",
maxRows: 12,
term: request.term
},
success: function(data) {
var results = [];
$.each(data, function(i, item) {
var itemToAdd = {
value: item,
label: item
};
results.push(itemToAdd);
});
return response(results);
}
});
}
});
I set up a fiddle here: http://jsfiddle.net/nicolapeluchetti/pRzTy/ (imagine that 'data' is the json that is returned)