I have an autocomplete script which suggest a list of tags that can be chosen from our database. The user can also type a new one even if it's not suggested.
I would only like to let the user choose a suggested value from the list. This is our code:
<input id="tokenfield" class="with-border" type="text" name="tags" placeholder="Ejemplo: PHP, Google Adwords, Traducción, etc.">
<script type="text/javascript">
var action = "skill_tag_search";
$('#tokenfield').tokenfield({
autocomplete: {
source: function (request, response) {
jQuery.get(ajaxurl, {
action: action, query: request.term
}, function (data) {
data = $.parseJSON(data);
response(data);
});
},
delay: 100
},
showAutocompleteOnFocus: true
});
</script>
Did you try the change event of jQuery autocomplete?
https://api.jqueryui.com/autocomplete/#:~:text=Events-,change,-(%20event%2C%20ui%20)
Last time I solved it doing something like this.
$('#tokenfield').tokenfield({
autocomplete: {
source: function (request, response) {
jQuery.get(ajaxurl, {
action: action, query: request.term
}, function (data) {
data = $.parseJSON(data);
response(data);
});
},
delay: 100,
change: function (event, ui) {
if (!ui) {
$(tokenfield).val(//Clear the autocomplete field);
} else {
$(tokenfield).val(//Set value to the autocomplete field);
}
}
},
showAutocompleteOnFocus: true
});
Related
I am using autocomplete j query to suggest my users some questions and then when user select one of the questions it should shows the answer.
it works fine for the first click
when user clicks on each of these questions the answer is showing correctly but the problem is when user clear the inputs and write another word and then select one of the suggestion for the next time nothing happened after select each one
here is my jquery codes
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
dataType: 'json',
method: 'POST',
data: {
q: request.term
},
url: 'Help_And_Customer_Support/AjaxQuestion/q',
success: function (data) {
console.log(data.Qu);
response($.map(data, function (item) {
console.log(item.Ans);
return { label: item.Qu, id: item.Ans };
}))
},
});
},
select: function (event, ui) {
$("#showansw").css("height", 200);
var qans = ui.item.id;
var qq = ui.item.label;
$("#showansw p").html(qans);
$("#showansw h5").html(qq);
}
});
Appreciate any help. thanks
im using autocomplete to retrieve data from the database
$('input[name=\'product_name\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=checkout/cart/autocomplete&name=' + encodeURIComponent(request), //Controller route
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
'select': function(item) {
$('input[name=\'product_id\']').val(item['value']);
$('input[name=\'product_name\']').val(item['label']);
},
focus: function(event, ui) {
return false;
}
});
i already put the focus return false but my dropdown arrow keys still not working.
i also tried using event.preventDefault();
There is some problem with your select event handler of jquery-ui-autocomplete. So try this script -
$('input[name=\'product_name\']').autocomplete({
source: function(request, response) {
$.ajax({
url: 'index.php?route=checkout/cart/autocomplete&name=' + encodeURIComponent(request), //Controller route
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
select: function(event , ui) {
$('input[name=\'product_id\']').val(ui.item.value);
$('input[name=\'product_name\']').val(ui.item.lable);
},
focus: function(event, ui) {
return false;
}
});
jquery-ui-autocomplete event select callback specified:
$( ".selector" ).autocomplete({ select: function( event, ui ) {} });
And hope this will solve your issue.
javascript
<script type="text/javascript">
function getCustomer() {
$('#CST_Idx_BI').autocomplete({
source: function (request, response) {
$.ajax({
type: 'POST',
url: '#Url.Action("JsonGetCustomerName","Customer")',
dataType: 'JSON',
data: { Keyword: $('#CST_Idx_BI').val(), CST_Idx: $('#CST_Idx_BI').val() },
success: function (data) {
response(
$.map(data, function (item, i) {
return {
label: item.CST_Name,
value: item.CST_Idx
}
})
);
}
});
},
focus: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.question);
},
select: function (event, ui) {
$('#CST_Name_BI').val(ui.item.label);
},
})
}
</script>
When somebody inputs data(Regardless of whether numeric:CST_Inx or character:Keyword), I want to get the result they want.
But if somebody input data, Keyword = the data, CST_Idx = the data.
So I can't get any result... in my case, How can I solve this?
Is it possible to post above two data in same input element?
I mean, Regardless of whether CST_Inx or Keyword, when somebody inputs data in same input element, I want to get same result.
Umm, I've changed my post many times. In advance Sorry. I didn't check my error carefully bofore posting this. Sorry.
I want to change the textbox value on another textbox selection with autocomplete. I'm using django 1.7 and jquery 1.9
I am not good at javascript I tried alot of solutions to make autocomplete work with django but I can not change the other textbox value.
This is django code
view.by
def auto_complete(request):
search = request.GET['term']
products = Products.objects.all().filter(product_name__startswith=search)
products_serialized = serializers.serialize('json', products)
return JsonResponse(products_serialized, safe=False)
url.by
url(r'^autocomplete/$', views.auto_complete, name='Auto Complete'),
textbox
<input type="text" id="product" name="product" class="product" value="">
<input type="text" id="price" name="product" class="price" value="">
javascript function
function Complete(){
$( "#product" ).autocomplete({
select: function (e, ui) {
$("#product").val(ui.item.label);
return false;
},
minLength: 1,
source: function (request, response) {
$.ajax({
url: '/autocomplete',
data: request,
success: function (data) {
var ParsedObject = $.parseJSON(data);
response($.map(ParsedObject, function (item) {
var results = item.fields.product_name ;
return {
value: results
};
}));
},
});
}
});
}
I found the answer
function Complete(){
$( "#product" ).autocomplete({
select: function (e, ui) {
$("#product").val(ui.item.label);
return false;
},
source: function (request, response) {
$.ajax({
url: '/autocomplete',
data: request,
success: function (data) {
var ParsedObject = $.parseJSON(data);
response($.map(ParsedObject, function (item) {
var name = item.fields.product_name ;
var price = item.fields.product_price ;
var count = item.fields.product_count ;
var the_id = item.pk ;
return {
value: name,
price: price,
count: count,
the_id: the_id,
};
}));
}
});
},
minLength: 1,
autoFocus: true,
select: function ( event, ui ) {
$('#price').val( ui.item.price );
$('#count').val( ui.item.count );
$('#the_id').val( ui.item.the_id );
},
});
I am trying to use autocomplete and autogrow with the Jeditable jquery plugin and cannot seem to incorporate both. I currently have the Jeditable + autocomplete working perfectly. When I tr to add code for the autogrow it doesn't work and causes a post back when I hit the save button. Any help would be appreciated.
This is what I have so far:
$('#directionList').autocomplete({
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
});
$.editable.addInputType('autocomplete', {
element: $.editable.types.textarea.element,
plugin: function (settings, original) {
$('textarea', this).autocomplete(settings.autocomplete);
}
});
$(".directionAutoComplete").editable(function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
}, {
type: "autocomplete",
indicator: 'Saving...',
tooltip: "Enter a direction...",
onblur: function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
},
cancel: 'Cancel',
submit: 'Save',
autocomplete: {
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
}
});
Here's some reference material:
Jeditable
Jeditable - Auto Grow Tutorial
For those running into this problem I have gotten it to work. I went with the growfield plugin just because the autogrow one was having some weird results (it worked, but the formatting looked off when I saved it so I just opted to go the easier route of using a different plugin.)
Here's my final code:
$.editable.addInputType('growfield', {
element: function (settings, original) {
var textarea = $('<textarea>');
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
// will execute when textarea is rendered
textarea.ready(function () {
// implement your scroll pane code here
});
$(this).append(textarea);
return (textarea);
},
plugin: function (settings, original) {
// applies the growfield effect to the in-place edit field
$('textarea', this).growfield(settings.growfield);
$('textarea', this).autocomplete(settings.autocomplete);
}
});
$(".directionAutoComplete").editable(function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
}, {
type: "growfield",
indicator: 'Saving...',
tooltip: "Enter a direction...",
onblur: function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
},
cancel: 'Cancel',
submit: 'Save',
growfield: {},
autocomplete: {
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
}
});