I have autocomplete working on my site with the following:
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
}
});
});
What I want to do now is that when a user types in something that is not shown on the dropdown, I'd like for the following to take place:
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
I tried using the following but it didn't work:
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
if(typeof(ui.item)){
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
} else {
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
}
}
});
});
the select evevnt is only triggered when you select an item in dropdown
you could do it on search event
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
},
search: function() {
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
}
});
});
I don't know what the whole idea is without seeing markup. But my guess is:
$("#client").autocomplete({
source: function( request, response ) {
$.ajax({
url: "/appointments/clients.json",
dataType: "jsonp",
success: function( data ) {
var suggestions = $.map( data, function( item ) {
return {
label: item.value,
value: item.id
}
});
// idea: whatever I have, extend to extra item.
suggestions.push({
label: 'Add appointment',
value: 0
});
response( suggestions );
}
});
},
select: function(evt, ui){
if( ui.item.label == 'Add appointment'){
/* do something special with it */
}else{
/* blah blah */
}
}
});
Related
i was implementing Jquery autocomplete in website and the issue with it is event of text change is not triggred if we press and hold back button in android devices
$("#user_name4").autocomplete({
source: function( request, response ) {
if (user_id_4 != 0 ) {
user_id_4 = 0;
my_entry_fees = my_entry_fees - entry_fees;
document.getElementById("join_btn").value= "Pay "+my_entry_fees+" Rs;";
my_joined--;
}
$.ajax({
url: "../API/v1/SearchUser",
data: 'value='+request.term,
dataType: "json",
headers:
{
'Authorization':'Basic dGVzdDp0ZXN0',
'Authorizations': tokensdb,
},
type: "POST",
success: function (data) {
response(data.data);
}
});
},
minLength: 1,
select: function(event, ui) {
user_id_4=ui.item.user_id;
var username=ui.item.username;
$('#user_name4').val(username);
my_entry_fees = my_entry_fees + entry_fees;
document.getElementById("join_btn").value= "Pay "+my_entry_fees+" Rs";
my_joined++;
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
var path = "http://graph.facebook.com/"+item.facebook_id+"/picture?type=square";
return $( "<li><div><img alt= '' src='"+path+"'><span>"+item.username+"<br>"+item.label+"</span></div></li>" ).appendTo( ul );
};
});
here is the code that i was using for autocomplete
I found the solution for that:
$("#user_name4").keyup(function() {
if (!this.value) {
if (user_id_1 != 0 ) {
user_id_1 = 0;
my_entry_fees = my_entry_fees - entry_fees;
document.getElementById("join_btn").value= "Pay "+my_entry_fees+" Rs";
my_joined--;
}
}
});
I use Jquery UI draggable,
I would like add menu on favorite menu when draggable list menu ...
I using options appendTo, but the problem, how the way menu add to favorite menu when I drag until favorite container...
Sorry for my bad english ...
$("YourSelector").draggable(
{
start: function(event, ui)
{
//This Occurs when drag start
selectedClass = $(this).attr('data-value');
console.log(selectedValue);
},
stop: function() {
//This Occurs when drag stop
selectedClass = $(this).attr('data-value');
console.log(selectedValue);}
});
$(".navbar-menu").draggable({
appendTo: ".navbar-favoritebody ul",
axis: "y",
containment: ".navbar-left",
handle: "a:not([data-disabled]):not([data-type='favorite']):not(:contains('Dashboard'))",
helper: "clone",
start: function(ev, ui) {
$("body").prepend("<div class=\"ondrag\"></div>");
var _this = $(this);
_this.find("a").attr("data-href","favorite/create");
},
drag: function(ev, ui) {},
stop: function(ev, ui) {
$(".ondrag").remove();
var _this = $(this),
desc = parsing.toUpper(_this.find("a").attr("data-slug").replace(/\-/g, " "), 2);
var target = $(event.target);
console.log(target.prop('className'));
if(target.prop("className") == "navbar-favoritebody") {
$.ajax({
type: "POST",
url: location.pathname+"?r="+_this.find("a").attr("data-href"),
data: {
"Favorite[menu_id]": _this.find("a").attr("data-menu"),
},
dataType: "text",
error: function(xhr, errors, message) {
console.log(xhr, errors, message);
},
beforeSend: function() {
navigasi.process("load");
},
success: function(data) {
if(!$.trim(data)) {
notification.open("danger", "Menu "+ desc +" sudah ada di Favorite.", 2000);
} else {
$(".navbar-favoritebody").html(data);
notification.open("success", "Menu "+ desc +" berhasil ditambah ke Favorite.", 2000);
}
},
complete: function() {
navigasi.process("destroy");
_this.find("a").removeAttr("data-href");
}
});
}
},
My sources are JSON objects that fetched from url and it looks like below.
[
{"ID":1,"GROUP_ID":"1","CONTACTNAME":"Mizuki","PHONENUMBER":"+6289695049930"},
{"ID":15,"GROUP_ID":"3","CONTACTNAME":"Sinbad","PHONENUMBER":"+6287654321"},
{"ID":23,"GROUP_ID":"","CONTACTNAME":"Titus","PHONENUMBER":"+6255555555"}
];
When user typing, result of suggestion is CONTACTNAME and value that inserted into searchbox is PHONENUMBER. Fetch data from source/url have no issue but in searchbox there's no value passed.
Screenshot below
Here's my script
$(function() {
$( "#contact" ).autocomplete({
source: "api/contact/auto",
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
});
});
Form view
<input type="text" v-model="message.DESTINATIONNUMBER" id="tags" class="form-control" name="destinationNumber" >
I try to remove vue snippet (v-model) still same.
Any suggestion? Whats wrong?
UPDATED!!
My mistake. Forgot add this code at the end.
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
So, full javascript is like in jquery-ui docs
$(function() {
$( "#contact" ).autocomplete({
source: "api/contact/auto",
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
Thanks for people who try to help me. Appreciate it.
For the autocomplete to work, you need to have "label" attribute in the returned JSON array. You can either change that on the server side, or transform it on the client as follows:
$( "#contact" ).autocomplete({
source: function (request, response) {
$.ajax({
url: "api/contact/auto",
data: { query: request.term },
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.CONTACTNAME,
value: el.PHONENUMBER,
id: el.ID
};
});
response(transformed);
},
error: function () {
response([]);
}
});
});
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
});
There were a couple of errors in your JavaScript:
"source" is misspelled ("sorGce")
in availableTags indexes except 0, the colon is inside the quotes instead of outside
Working fiddle:
sorGce: availableTags, -> source: availableTags,
"ID:" "23", -> "ID": "23",
https://jsfiddle.net/ep1s9w3s/1/
Not sure if this is the root cause of your problem or not, but it might help you fix your fiddle.
in my project im using the jQuery Autocomplete which is working great.
the problem is, that i want to handle a situation were a user changes the input of the text.
for ex. the data contains ("prov 1", "prov 2"), the user choose from the menu "prov 1" but then changed it to "prov 2" by changing the 1 with 2.
i implemented the "change" event in the js but the ui.item is empty (i guess since the menu is not shown..)
i read that the "change" event is fired only when the text box is losing focus -> not to good for me, since the flow is selecting a "prov" and clicking button to continue.
any suggestions ??
here is my code:
JS
$(element).autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
url: requestUrl,
dataType: "json",
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Label,
value: item.Label,
realValue: item.Value
};
}));
},
});
},
select: function (event, ui) {
var hiddenFieldName = $(this).attr('data-value-id');
$('#' + hiddenFieldName).val(ui.item.realValue);
hiddenFieldName = $(this).attr('data-value-name');
$('#' + hiddenFieldName).val(ui.item.label);
},
change: function (event, ui) {
alert('changed');
if (!ui.item) {
alert('no value'); /* IS FIRED */
} else {
}
}
});
});
Try the keypress event handler -- http://api.jquery.com/keypress/
Try change this:
change: function (event, ui) {
to this:
input: function (event, ui) {
Or you can try with this:
$(element).autocomplete({
minLength: 2,
//all your code but not change: function
}).on('input', function(e){
alert('changed');
if (this.value.length <== 0) {
alert('no value'); /* IS FIRED */
} else {
alert(this.value);
}
});
I am using jquery modal, within each modal I have a form. I am then loading certain jquery functions onto the form elements, for example jquery autocomplete.
When I open the modal for the first time it is working fine with all the jquery functions within the script, but as soon as I close the first modal and open again none of the functions work.
Its as though they are binded on the page load to the form, then when the button is clicked for the modal its works and then closing the modal unbinds it.
Does anybody have any ideas as to why they would stop working after the first modal open/close?
$(document).ready(dialogForms);
function dialogForms() {
$('a.menubutton').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
if($(this).find('form').valid()){
// do stuff if form validates
submitFormWithAjax($(this).find('form'));
$('#homepage').trigger('click');
$(this).dialog('close');
}
else {
}
},
'Cancel': function() {$(this).dialog('close');}
},
width: 650,
height: 400,
show: "fade",
hide: "fade"
});
$('#edit_vle').bind('change', function (e) {
if( $('#edit_vle').val() == 'FE') {
$('#fe_automcomplete1').show();
$('#he_automcomplete1').hide();
$("#edit_he_title").val("");
$("#edit_he_code").val("");
}
else{
$('#fe_automcomplete1').hide();
$('#he_automcomplete1').show();
$("#edit_fe_title").val("");
$("#edit_fe_code").val("");
}
});
$('#delete_vle').bind('change', function (e) {
if( $('#delete_vle').val() == 'FE') {
$('#fe_automcomplete2').show();
$('#he_automcomplete2').hide();
$("#delete_he_title").val("");
$("#delete_he_code").val("");
}
else{
$('#fe_automcomplete2').hide();
$('#he_automcomplete2').show();
$("#delete_fe_title").val("");
$("#delete_fe_code").val("");
}
});
var epronames = [<?php
$eprotmp = Array();
while($eprorow = mssql_fetch_array($epro_course)) $eprotmp[] =
'{
title: "'.$eprorow['Name'].'",
label: "'.$eprorow['Code'].' - '.$eprorow['Name'].'",
code: "'.$eprorow['Code'].'",
user: "'.$eprorow['fname'].' '.$eprorow['sname'].'",
}';
echo join(',', $eprotmp);
?>];
var fenames = [<?php
$fetmp = Array();
while($ferow = mysql_fetch_array($feinactive)) $fetmp[] =
'{
title: "'.$ferow['course'].'",
label: "'.$ferow['shortname'].' - '.$ferow['course'].'",
code: "'.$ferow['shortname'].'",
}';
echo join(',', $fetmp);
?>];
var henames = [<?php
$hetmp = Array();
while($herow = mysql_fetch_array($heinactive)) $hetmp[] =
'{
title: "'.$herow['course'].'",
label: "'.$herow['shortname'].' - '.$herow['course'].'",
code: "'.$herow['shortname'].'",
}';
echo join(',', $hetmp);
?>];
$("#title").autocomplete({
minLength: 3,
source: epronames,
focus: function( event, ui ) {
$("#title").val( ui.item.label );
return false;
},
select: function( event, ui ) {
$("#title").val( ui.item.title );
$("#code").val( ui.item.code );
$("#ctl").val( ui.item.user );
return false;
},
change: function(event, ui) {
if (!ui.item) {
$("#title").val("");
}
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$("#edit_he_title").autocomplete({
minLength: 3,
source: henames,
focus: function( event, ui ) {
$("#edit_he_title").val( ui.item.label );
return false;
},
select: function( event, ui ) {
$("#edit_he_title").val( ui.item.title );
$("#edit_he_code").val( ui.item.code );
return false;
},
change: function(event, ui) {
if (!ui.item) {
$("#edit_he_title").val("");
}
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$("#edit_fe_title").autocomplete({
minLength: 3,
source: fenames,
focus: function( event, ui ) {
$("#edit_fe_title").val( ui.item.label );
return false;
},
select: function( event, ui ) {
$("#edit_fe_title").val( ui.item.title );
$("#edit_fe_code").val( ui.item.code );
return false;
},
change: function(event, ui) {
if (!ui.item) {
$("#edit_fe_title").val("");
}
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
if($("#clearform").length > 0){
$("#clearform").click(function() {
$("#title").val('');
$("#code").val('');
$("#ctl").val('');
});
}
if($("#delete_fe_clearform").length > 0){
$("#delete_fe_clearform").click(function() {
$("#delete_fe_title").val('');
$("#delete_fe_code").val('');
});
}
if($("#edit_fe_clearform").length > 0){
$("#edit_fe_clearform").click(function() {
$("#edit_fe_title").val('');
$("#edit_fe_code").val('');
});
}
if($("#delete_he_clearform").length > 0){
$("#delete_he_clearform").click(function() {
$("#delete_he_title").val('');
$("#delete_he_code").val('');
});
}
if($("#edit_he_clearform").length > 0){
$("#edit_he_clearform").click(function() {
$("#edit_he_title").val('');
$("#edit_he_code").val('');
});
}
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
}
});
return false;
}
Here are the buttons for each modal.
New Course
Edit Course
Delete Course
I placed the jquery functions into the open method
open: function(){
To close the dialog instead of using:
$(this).dialog('close');
I used
dialog.remove();
My functions now work every time i open the dialog