Develop Reference

How to automatically add instead of showing with javascript ajax

How can I change this script which right now showing me the code or the name when is equal to the code or name I suggest in the input?
I need that instead of showing me the name the javascript added it automatically
Here are two images:
Here the code :
//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
if(type =='cod' )autoTypeNo=0;
if(type =='nombreProd' )autoTypeNo=1;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'include/ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
beforeSend: function(){
$('#msgCod').html('<img src="images/ajax-loader.gif"/> verificando');
},
success: function( data ) {
if(data == '') {
$('#submit').attr("disabled", true);
$('#msgCod').html("<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>Este producto no existe en la base</div>");
} else if(data != '') {
$('#submit').attr("disabled", false);
$('#msgCod').html("");
}
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#cod_'+id[1]).val(names[0]);
$('#nombreProd_'+id[1]).val(names[1]);
$('#proveedor_'+id[1]).val(names[2]);
$('#maskedDate_'+id[1]).val(names[3]);
$('#venta_'+id[1]).val(names[4]);
$('#existencia_'+id[1]).val(names[5]);
calculateTotal();
}
});
});

Why jquery autocomplete load only once time

My javascript
function do_ajax(){
$.widget("custom.autocomplete", $.ui.autocomplete, {
....
}
var getData = function(request, response) {
$.ajax({
url : '//htlsearch01.pegipegi.com/HotelSearchAPI/v1/autocomplete/' + request.term,
cache : false,
dataType : 'json',
success : function proccessData (data){
...
}
})
}
$("#hotelNameKey").autocomplete({
source: getData,
minLength: 3,
select: function(event, ui) {
...
}
})
}
}
Why I run my autocomplete only once time. is there wrong with the structure? Or is possible if I using selector keypress, on?
Thank you

jquery autocomplete, how to show all options on focous?

I have below autocomplete code, which works fine When i type one or more letters.
$("body").on('focus', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val();
$(this).autocomplete({
minLength: 0,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(".sub-cat").val(ui.item.label);
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
});
I would like to populate the drop down with all of the matching words from the database on just focusing the input box. That means even without typing a single word. When i just focus, the function is called, but nothing within the
function $(this).autocomplete({ is executed. Any idea why autocomplete not working when focus in on the input field?

Use below code it will work as per your requirement.
$("body input.sub-category").each(function{
$(this).on('focus', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val();
$(this).autocomplete({
minLength: 0,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(".sub-cat").val(ui.item.label);
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
});
});
If this is not work add status in comment.

I was able to fix by adding one more function. So there is one function executing on keyup and another one on focus.
$("body").on('keyup', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val()?$(this).val():"";
$(this).autocomplete({
minLength: 0,
autoFocus: true,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(this).val(ui.item.label);
return false;
},
change: function(event, ui) {
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
});
Above one executes on keyup and below one on focus.
$("body").on('focus', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val()?$(this).val():"";
$(this).autocomplete({
minLength: 0,
autoFocus: true,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(this).val(ui.item.label);
return false;
},
change: function(event, ui) {
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
$(this).autocomplete("search", "");
});

Error: object doesn't support 'autocomplete'

I have this function using the jquery autocomplete widget, that I am getting the following error:0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'autocomplete'
On my html page, in the head section I have included the following tags.
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
The function is called by a variety of option button calls to do several different query's. I have this function in a different application that works well but here it is not.
function AutoComplete(Type) {
//create AutoComplete UI component
$("#txtCriteria").autocomplete({
source: function (request, response) {
$.ajax({
autoFocus: true,
async: false,
delay: 250,
url: "wsReports.asmx/AutoComplete",
data: "{'Type':'" + Type + "', 'filter':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.ACName,
value: item.ACCode
} // end of return
})) // end of response
} // end of success
}); // end of ajax
}, // end of source
select: function (event, ui) {
if (ui.item.value == "") {
alert("nothing to select");
}
else {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
}
}, // end of select
change: function (event, ui) {
if (!ui.item) {
$(event.target).val('');
}
},
}) // end of txtCriteria.autocomplete
} // end of AutoComplete
Any ideas why it is not recognized in the above situation?

My fault. The jquery.js and bootstrap were loading after the jquery-ui.

jquery autocomplete 'Disable' show all terms

Hey could someone guide me out of this problem....
I successfully created the jquery autocomplete function , but my problem is that autocomplete suggestions shows all the available labels . Autocomplete is showing the results which are not even matching the search term . I mean it showing all available label . Is their any solution to show only matching labels. here is the java function.
Any help will be gladly appreciated . Thank You
$(document).ready(function () {
$("#search-title").autocomplete({
source: function ( request, response ) {
$.ajax({
url: "availabletags.json",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response( $.map( data.stuff, function ( item ) {
return {
label: item.label,
value: item.value
};
}));
}
});
},
minLength: 2,
select: function (event, ui) {
$(event.target).val(ui.item.label);
window.location = ui.item.value;
return false;
}
});
});
EDIT : - Here is the Json File
{"stuff":[ {"label" : "Dragon", "value" : "eg.com"} ,
{"label" : "testing", "value" : "eg2.com"}]}
Successful Edited Code
<script>
$(document).ready(function () {
$("#search-title").autocomplete({
source: function ( request, response ) {
$.ajax({
url: "availabletags.json",
dataType: "json",
success: function (data) {
var sData = data.stuff.filter(function(v) {
var re = new RegExp( request.term, "i" );
return re.test( v.label );
});
response( $.map( sData, function ( item ) {
return {
label: item.label,
value: item.value
};
}));
}
});
},
minLength: 2,
focus: function (event, ui) {
this.value = ui.item.label;
event.preventDefault(); // Prevent the default focus behavior.
},
select: function (event, ui) {
$(event.target).val(ui.item.label);
window.location = ui.item.value;
return false;
}
});
});
</script>

Here is the change you want to make:
dataType: "json",
success: function (data) {
var sData = data.stuff.filter(function(v) {
return v.value.indexOf( request.term ) > -1;
});
response( $.map( sData, function ( item ) {
This search will be done by value. To search by label, in other words for the user's input to be compared to the label in your JSON use the following instead:
return v.label.indexOf( ........
UPDATE
To make your search case insensitive, use the following:
var re = new RegExp( request.term, "i" );
return re.test( v.label );
instead of return v.value.indexOf( request.term ) > -1;