Hello I have a html file that has several inputs which are autofilled when a matching item is selected on auto-complete
My html file is:
<table class="table table-bordered">
<ul>
<li><label>Barcode</label>
<input class="form-control" type='text' id='barcodescanr' name='barcodescanr' />
</li>
<li><label>Surname </label>
<input class="form-control" type='text' id='surname_1' name='surname' required/>
</li>
<li>
<label>Name</label>
<input class="form-control" type='text' id='name_1' name='name' required/>
</li>
<li><label>Company Name</label>
<input class="form-control" type='text' id='company_name_1' name='company_name' required/>
</li>
</ul>
</table>
My search looks like this
The autocomplete that fills the input fields is this and it works through barcode scanning
$('#barcodescanr').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'barcodescanr',
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: 3,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#name_1').val(names[2]);
$('#company_name_1').val(names[3]);
$('#surname_1').val(names[1]);
$('#firm_1').val(names[4]);
$('#info').val(names[5]);
$('#scanbartime').val(names[6]);
$('#id').val(names[7]);
$('#custId').val(names[8]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
How could I select the first matching barcode from auto-complete without clicking on that? Thank you
try this
$('#barcodescanr').change(function(){
$('#ui-id-1 li:first-child').trigger('click');
});
or this, when user stop writing
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms, 2 second for example
var $input = $('#barcodescanr');
//on keyup, start the countdown
$input.on('keyup', function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
$('#ui-id-1 li:first-child').trigger('click');
}
Play with the value of doneTypingInterval to your liking.
$('.table-bordered ul li:first-child').click();
Related
I have two buttons.One is named Update and another one is view. Both buttons are working perfectly. But if I duplicated 2 buttons, only view button is working. Update button is just displayed and not doing any click function.
WORKING Code:
<button id="AttendanceEnter" name="attendance" class="btn btn-primary">Add</button>
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
Not Working Code:
<button id="AttendanceEnter" name="attendance" class="btn btn-primary">Add</button>
//ABove Code function is working,click function WORKING
//Below button only displaying, click function NOT working
<button id="AttendanceEnter1" name="attendance" class="btn btn-primary">Add</button>
//Below 2 buttons are working perfectly,Clicks are working
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
Complete js is here:
Contains click function only for Update buttons
$(document).ready(function(){
$('.select_date').datepicker({
autoclose: true,
dateFormat: date_format,
todayHighlight: true,
changeMonth: true,
changeYear: true,
maxDate: 0
});
/*Retrive Student List */
$('#AttendanceEnter').click(function() {
$( '#AttendanceClass' ).parent().parent().find('label').removeClass( 'error' );
$( '#AttendanceDate' ).parent().parent().find('label').removeClass( 'error' );
$('#AddModalContent').html('');
$( '#wpsp-error-msg' ).html('');
var cid = $('#AttendanceClass').val();
var date = $('#AttendanceDate').val();
if( cid=='' )
$( '#AttendanceClass' ).parent().parent().find('label').addClass( 'error' );
if( date=='' )
$( '#AttendanceDate' ).parent().parent().find('label').addClass( 'error' );
if(cid!='' && date!=''){
var data=[];
data.push({name: 'action', value: 'getStudentsList'},{name: 'classid', value: cid},{name:'date',value:date});
$.ajax({
type: "POST",
url: ajax_url,
data: data,
beforeSend:function () {
$.fn.notify('loader',{'desc':'Loading student list..'});
$('#AttendanceEnter').attr("disabled", 'disabled');
},
success: function( response ) {
$('#AttendanceEnter').removeAttr('disabled');
var response_data = jQuery.parseJSON(response);
if( response_data.status == 0 ) {
$( '#wpsp-error-msg' ).html(response_data.msg);
$( '#AddModal' ).modal( 'hide' );
} else {
$('#AddModalContent').html(response_data.msg);
}
},
error:function(){
$('#AttendanceEnter').removeAttr('disabled');
$.fn.notify('error',{'desc':'Something went wrong. Try after refreshing page..'});
},
complete:function () {
$('#AttendanceEnter').removeAttr('disabled');
$('.pnloader').remove();
}
});
$('#AddModal').modal('show');
}
});
///
/*Retrive Student List */
$('#AttendanceEnter1').click(function() {
$( '#AttendanceClass' ).parent().parent().find('label').removeClass( 'error' );
$( '#AttendanceDate' ).parent().parent().find('label').removeClass( 'error' );
$('#AddModalContent').html('');
$( '#wpsp-error-msg' ).html('');
var cid = $('#AttendanceClass').val();
var date = $('#AttendanceDate').val();
if( cid=='' )
$( '#AttendanceClass' ).parent().parent().find('label').addClass( 'error' );
if( date=='' )
$( '#AttendanceDate' ).parent().parent().find('label').addClass( 'error' );
if(cid!='' && date!=''){
var data=[];
data.push({name: 'action', value: 'getStudentsList'},{name: 'classid', value: cid},{name:'date',value:date});
$.ajax({
type: "POST",
url: ajax_url,
data: data,
beforeSend:function () {
$.fn.notify('loader',{'desc':'Loading student list..'});
$('#AttendanceEnter1').attr("disabled", 'disabled');
},
success: function( response ) {
$('#AttendanceEnter1').removeAttr('disabled');
var response_data = jQuery.parseJSON(response);
if( response_data.status == 0 ) {
$( '#wpsp-error-msg' ).html(response_data.msg);
$( '#AddModal' ).modal( 'hide' );
} else {
$('#AddModalContent').html(response_data.msg);
}
},
error:function(){
$('#AttendanceEnter1').removeAttr('disabled');
$.fn.notify('error',{'desc':'Something went wrong. Try after refreshing page..'});
},
complete:function () {
$('#AttendanceEnter1').removeAttr('disabled');
$('.pnloader').remove();
}
});
$('#AddModal').modal('show');
}
});
using jquery you can do something like
$("#AttendanceEnter , #Attendanceview").click(function(){
//your code
});
The name attributes should also be unique in this case. Your buttons have duplicated name attributes which will confuse HTTP.
I am trying to get three type of autocomplete searchbox. Currently, it is not working and I think the cause is that I do not set the vaule inside autocomplete source value in a proper way. Really I do not know how to do. Can you please guide me?
HTML:
<input type='text' title='tags' id='tags' />
<input type="radio" name="radioBtn" val="1" id="fistLetter">
<input type="radio" name="radioBtn" val="2" id="word">
JS:
$(document).ready(function() {
if($('#fistLetter').is(':checked')) {
alert("Searching matching from the first letter Only");
}
if($('#word').is(':checked')) {
alert("Searching matching words Only");
}
if($('#all').is(':checked')) {
alert("Searching all letters and words matching Only (Normal Auto Complete)");
}
$( "#tags" ).autocomplete({
autoFocus: false,
delay: 300,
minLength: 1,
source: './php/autocompletedatas.php',
select: function (event, ui) {
$("#tags").val(ui.item.value);
return false;
}
})
});
You will be able to understand my problem with this jsfiddle
According to the documentation the autocomplete "source" type is a string,array or Function(request,response(data)), in your example so you are passing just a string, not the result of the php call.
You must call the action within a function or load the data before initialise the autocomplete.
This jsfiddles gives you an idea of how it might be done.
HTML:
autocomplete data: <div id="output"></div>
<div id="main" style="display: none">
<br /> Regex type: <div id="regexType"></div>
<br /><input type='text' title='tags' id='tags' disabled='true' value='Select an option first'/>
fistLetter: <input type="radio" name="radioBtn" val="1" id="fistLetter">
word: <input type="radio" name="radioBtn" val="2" id="word">
all: <input type="radio" name="radioBtn" val="3" id="all">
</div>
JS:
$(document).ready(function() {
/***jsfiddle /echo/json/ data mock****/
var mock = { tags: [ "javascript", "java" , "php", "coldfusion"] };
var dataResult;
$.ajax({
url: '/echo/json/',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: {json: JSON.stringify(mock) },
success:function(data){
$('#output').html(JSON.stringify(data));
dataResult = data.tags
$('#main').show(100)
},
error: function () {
$('#output').html('Bummer: there was an error!');
}
});
/*******/
var regex;
$('input[type=\'radio\']').on('click',function(){
$('#tags').val('');
$('#tags').removeAttr('disabled');
var regexType;
if($('#fistLetter').is(':checked')) {
$('#output').html("Searching matching from the first letter Only");
regexType = 'first'
}
else if($('#word').is(':checked')) {
$('#output').html("Searching matching words Only");
regexType = 'word'
}
else if($('#all').is(':checked')) {
$('#output').html("Searching all letters and words matching Only (Normal Auto Complete)");
regexType = 'all'
}
initAutocomplete(regexType);
})
function initAutocomplete(regexType){
if(regexType === 'all'){
$( "#tags" ).autocomplete({
autoFocus: false,
delay: 300,
minLength: 1,
source: dataResult
})
}else{
$( "#tags" ).autocomplete({
autoFocus: false,
delay: 300,
minLength: 1,
source:
function( req, response ) {
if(regexType === 'first'){
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp( "^" + re, "i" );
response( $.grep( dataResult, function( item ){
return matcher.test( item );
}) );
}else {
var re = $.ui.autocomplete.escapeRegex(req.term);
regex = "\\b_replace_\\b";
re = regex.replace('_replace_', re);
console.log(re)
var matcher = new RegExp( re, "i" );
response( $.grep( dataResult, function( item ){
return matcher.test( item );
}) );
}
}
})
}
}
});
The regex expression need to be implemented according to your requirements.
Hi I am having the html table which contain several columns, by pressing tab to add rows dynamically in the html table.i want to check that first and second input field is empty or not in html table. whether that input fields is empty rows not to get to added in dynamically. my problem is that validation is only working for first rows and not for dynamic rows.
<form id='students' method='post' id="form1" name='form1' action='index.php'>
<div class="table-responsive" id="nm">
<div align="center">
<b><input type="text" name="total_amt" id="total_amt" value="" maxlength="200" height="130px"; width="200px"; style="font-size:60pt;height:110px;width:600px;" align="center"; /></b>
</div>
<table class="table table-bordered">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>Country Name</th>
<th>Country Number</th>
<th>Country Phone code</th>
<th>Country code</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td><span id='snum'>1.</span></td>
<td><input class="form-control" type='text' id='countryname_1' name='countryname[]' autofocus /></td>
<td class="td_class"><input class="form-control country_no" type='text' id='country_no_1' name='country_no[]'/></td>
<td><input class="form-control" disabled type='text' id='phone_code_1' name='phone_code[]'/></td>
<td><input class="form-control" disabled type='text' id='country_code_1' name='country_code[]'/> </td>
</tr>
</table>
<button type="button" class='btn btn-danger delete'>- Delete</button>
<button type="button" class='btn btn-success addmore'>+ Add More</button>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".td_class").on('keyup', '#country_no_1', function(e) {
var icon1 = $('#countryname_1').val();
var keyCode = e.keyCode || e.which;
if (keyCode == 9 ) {
if(icon1 == '' )
{
alert("Please Select an Item");
document.form1.countryname_1.focus();
}
else{
$(".addmore").click();
}
} });
});
</script>
Here am adding the script code below:
<script>
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
var i=$('table tr').length;
$(".addmore").on('click',function(){
count=$('table tr').length;
var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
data +="<td><input class='form-control' type='text' id='countryname_"+i+"' name='countryname[]'/></td> <td class='td_class'><input class='form-control country_no' type='text' id='country_no_"+i+"' name='country_no[]'/></td><td><input class='form-control' type='text' disabled id='phone_code_"+i+"' name='phone_code[]'/></td><td><input class='form-control' disabled type='text' id='country_code_"+i+"' name='country_code[]'/></td></tr>";
$('table').append(data);
/*test */
$(".td_class").on('keyup', '#country_no_'+i, function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
$(".addmore").click();
}
});
/* test end */
row = i ;
$('#countryname_'+i).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
row_num : row
},
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("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#country_no_'+id[1]).val(names[1]);
$('#phone_code_'+id[1]).val(names[2]);
$('#country_code_'+id[1]).val(names[3]);
}
});
i++;
});
function select_all() {
$('input[class=case]:checkbox').each(function(){
if($('input[class=check_all]:checkbox:checked').length == 0){
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
function check(){
obj=$('table tr').find('span');
$.each( obj, function( key, value ) {
id=value.id;
$('#'+id).html(key+1);
});
}
$('#countryname_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
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("|");
$('#country_no_1').val(names[1]);
$('#phone_code_1').val(names[2]);
$('#country_code_1').val(names[3]);
}
});
$('#country_code_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_code',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[3],
value: code[3],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#country_no_1').val(names[1]);
$('#phone_code_1').val(names[2]);
$('#countryname_1').val(names[0]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
</script>
Help me #Thanks
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 );
},
});
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();
});