Iam new to programming.
Please dont mind if its a simple question.
I have a search box,
html
<input type="text" id="search" placeholder="Search" autocomplete="off"/>
When i type anything in search box, for example like abc, I need to show in dropdown as , restaurents matching 'abc', this is to be done in frontend.
Here is the code i have written to get data,
js
$("#search").keyup(function(){
if ($(this).val().length == 3) {
console.log($(this).closest(".row-fluid").find("ul").attr('id'));
$(this).closest(".row-fluid").find("ul").css('display', 'none');
}
}).autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "/search/site_search/"+$('#search').val(),
dataType: "json",
success: function(data) {
response( $.map( data.result, function( item ) {
return {
label: item.complaint_title,
value: item.complaint_iid,
};
}));
},
error: function(result) {
alert("Error");
}
});
},
select: function (event, ui) {
console.log(ui.item);
},
focus: function( event, ui ) {
$( "#search" ).val( ui.item.label );
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
Can anyone tell me how to do this.
Related
I am using category wise jquery autocomplete https://jqueryui.com/autocomplete/#categories to show list in drop down. I pass city names as label and country name as category. search by label name works fine but I want to give option to search by country. If user type country name then all cities from the country should be shown in drop down list.
So if user type australia then I need to find all lebels with category australia and show them in drop down
I have attached image which shows current functionality
javascript code is
$( "#loading" ).catcomplete
({
source: function( request, response )
{
$.ajax({
url: 'URL to fucntion',
dataType: "json",
data: {},
async:true,
success: function(data) {
var cat_data = $.map(data, function(item) {
return {
label: item.label,
category: item.category,
};
});
$("#loading").catcomplete({
source: cat_data,
minlength:0,
delay: 0
});
}
});
},
response: function(event, ui) {
if (!ui.content.length) {
$( "#loading" ).catcomplete({
source: [{"label":"australia","category":"sydney"},{"label":"australia","category":"melbourne"}]
});
} else {
$("#message").empty();
}
}
});
Hi I solved it using following code
use value and desc in json response instead of label and category
$( "#loading" ).autocomplete({
source: Json data here,
focus: function( event, ui ) {
$( "#loading" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#loading" ).val( ui.item.desc );
$( "#loading-id" ).val( ui.item.value );
$( "#loading-description" ).html( ui.item.desc );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.desc + "</div>" )
.appendTo( ul );
};
I'm trying to make an autocomplete with custom data like JQUI docs illustrate
Here is my Javascript code :
$.ajax({
type : 'POST',
url : '/loadUserCompanyByAjax',
dataType : 'json',
success: function (result) {
if (result.error == null) {
var dataArray = [];
$.each(result.companies,function(index,element){
dataArray.push({
name : element.name,
id : element._id
});
});
$( '.companyNameFromCreateMoe:empty' ).autocomplete({
minLength: 0,
source: dataArray,
focus: function( event, ui ) {
$(this ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
alert(ui.item.id);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.name +"</a>" )
.appendTo( ul );
};
}
else {
alert('AN ERROR HAS OCCURED DURING GETTING COMPANIES : ' + result.error);
}
}
});
The problem is that when i begin to type a letter nothing is happening excepted if i type the letter "e"...
And when i type the following the autocomplete list disapears..
If i change my dataArray by the Array given in exemple it works.
Here the content of my dataArray :
[
{
"name":"SARL salut ça va",
"id":"55bdd266b1257b401d405ead"
},
{
"name":"EURL Marco plomberie",
"id":"55bde8b3e633d33c1ecfbecc"
}
]
The source list objects should have the keys "label" and "value".
Read the documentation for the source property: http://api.jqueryui.com/autocomplete/
you should change your loop to create dataArray like this
$.each(result.companies, function (index, element) {
dataArray.push({
label: element.name,
value: element._id
});
});
Here is the detailed fiddle.
http://jsfiddle.net/sqfwhxmj/1/
Hope it helps.
I am trying to change how the found items are displayed in the autocomplete UI This autoComplete wigide is used inside of a dialog box.
I tried to use the '_renderMenu' property like the code below but the found items are displayed blank "no data"
Here is my code
$("#icwsTransferTo").autocomplete({
minLength: 2,
source: function(request, response) {
$.ajax({
type: 'GET',
url: 'index.php',
data: {method: 'userSearch', term: request.term},
dataType: 'json',
cache: false,
timeout: 30000,
success: function(data) {
if(!data){
return;
}
var allFound = $.map(data, function(m) {
return {
'name': m.configurationId.displayName,
'ext': m.extension,
'id': m.configurationId.id
};
});
response(allFound);
}
});
},
select: function( event, item) {
alert(item.value + ' was selected!!!');
},
'_renderItem': function (ul, item) {
return $( "<li>" ).attr( "data-value", item.id)
.append( '<span>' + item.name+ '</span><span style="float: right"> (' + item.ext + ')</span>' )
.appendTo( ul );
}
});
I figured it out...
Here is the new code for anyone that is searching. I found this article as a great resource.
$.widget("custom.autoCompleteUserList", $.ui.autocomplete, {
_renderItem: function (ul, item ) {
if(item.ext != 'undefined' && typeof item.ext !== 'undefined'){
var label = '<div class="ui-autocpmplete-item-wrapper"><span class="ui-autocpmplete-item-name-span">' + item.name + '</span><span class="ui-autocpmplete-item-ext-span"> (ext. ' + item.ext + ')</span></div>';
} else {
var label = '<div class="ui-autocpmplete-item-wrapper">' + item.name + '</div>';
}
return $( "<li>" )
.attr( "data-value", item.id )
.append( label)
.appendTo( ul );
}
});
$("#icwsTransferTo")
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autoCompleteUserList( "instance" ).menu.active ) {
event.preventDefault();
}
}).autoCompleteUserList({
minLength: 2,
source: function(request, response) {
$.ajax({
type: 'GET',
url: 'index.php',
data: {method: 'userSearch', term: request.term},
dataType: 'json',
cache: false,
timeout: 30000,
success: function(data) {
if(!data){
return;
}
var finalSource = $.map(data, function(m) {
return {
'name': m.configurationId.displayName,
'ext': m.extension,
'id': m.configurationId.id
};
});
response(finalSource);
}
});
},
focus: function() {
// prevent value inserted on focus
//return false;
},
select: function( event, ui ) {
console.log(ui.item);
alert(ui.item.value + ' < > ' + ui.item.label + ' was selected!!!');
}
})
Here I've a textbox, its data is filled by autocomplete using JSON.
Here i want textbox readonly after selecting any value of autocomplete (suggested fields).
textbox code:
$(document).ready(function ()
{
$('#patient_id').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'opdpatientajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'patientname',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
console.log(names[1], names[2], names[3]);
$('#patientAddress').val(names[1]);
$('#patientSex').val(names[2]);
$('#patientAge').val(names[3]);
}
});
});
<input type="text" id="patient_id" name="patient_nm"
placeholder="Enter and select Mother Name" title="Please Enter and select patinet name">
$("#patientAddress").attr("disabled", "disabled");
If you want to submit the field to $_POST, you need to enable it before sending the form.
$(document).ready(function ()
{
$('#patient_id').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'opdpatientajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'patientname',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
console.log(names[1], names[2], names[3]);
$('#patientAddress').val(names[1]);
$('#patientSex').val(names[2]);
$('#patientAge').val(names[3]);
$("#patientAddress").attr("disabled", "disabled");
$("#patientSex").attr("disabled", "disabled");
$("#patientAge").attr("disabled", "disabled");
}
});
});
OR you can use this method:
$( "#other" ).click(function() {
$( "#target" ).blur();
});
When I look the response from Chrome Developer Tools I see this:
[{
"summary": "foo",
"key": "myKey"
}]
My javascript(UPDATED):
jquery183(function() {
jquery183( "#city" ).autocomplete({
source: function( request, response ) {
jquery183.ajax({
url: '/servlet/ajax/',
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( jquery183.map( data, function( issue ) {
return {
label: issue.summary + ", " + issue.key,
value: issue.summary
}
}));
}
});
},
minLength: 2,
open: function() {
jquery183( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
jquery183( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
HTML:
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" />
Powered by geonames.org
</div>
I thought this should work, but it does not suggest any autocomplete items. Any suggestions?
If more code needed, feel free to ask.
As seen on: http://jqueryui.com/autocomplete/#remote-jsonp
You forgot to copy/paste the ajax call to retrieve your data.
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
}
});
I am not sure but is there a problem with <input id="city" />. It should probably be <input id="city" type="text"/>
Found answer from here:
Ajax success event not working
The result is probably not in JSON format, so when jQuery tries to parse it as such, it fails. You can catch the error with error: callback function.
You don't seem to need JSON in that function anyways, so you can also
take out the dataType: 'json' row.