I need some help with jQuery UI autocomplete function.
I have one cell which has class, and I have a working autocomplete in it right now.
$("[class*='enari']").autocomplete({
source: "getproductnow.php",
autoFocus: true,
minLength: 2,
dataType: "json",
select: function(event, ui) {
$('#tuote').val(ui.item.value);
},
open: function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, '<');
htmlString = htmlString.replace(/>/g, '>');
$(this).html(htmlString);
});
}
});
Where the problem comes is the situation where script adds by "document.createElement('div');" a new input field which has same name and autocomplete is not anymore working.
I need to have autocomplete working with "running numbers (1,2,3,4,5,6 and so on...)". Is it even possible and how?
Sorry for my rough language and thank you for your answers!
Related
I have 2 databases in my Laravel 5.7 app, and I would like to add a typeahead functionality with one of them.
It is the first time I use it, so I don't really know how to do it.
I'm following the instructions here: https://itsolutionstuff.com/post/laravel-57-autocomplete-search-from-database-using-typeahead-jsexample.html
I have used typeahead in my application. Hope this would help you.
$(document).ready(function(){
$.ajax(
{
type : 'GET',
url: base_url+"/getrelateduser",
success: function (data)
{
// Defining the local dataset
var relateduser = data;
// Constructing the suggestion engine
var relateduser = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: relateduser
});
$('.sendleads').typeahead({
hint: true,
highlight: true, /* Enable substring highlighting */
minLength: 3, /* Specify minimum characters required for showing result */
},
{
name: 'relateduser',
source: relateduser
});
}
});
});
Here the url "/getrelateduser" will return all the emails of users in the users table. Let me know if you have more queries.
In jquery data tables excel,copy and pdf buttons not showing other than this every thing works fine what could be the issue.
$(document).ready(function() {
var table = $('.export-table').DataTable({
dom: 'Bfrtip',
'bServerSide': true,
'sAjaxSource': 'api',
buttons: ['copy', 'excel', 'pdf']
});
table.buttons().container().appendTo('#export-table_wrapper .col-sm-6:eq(0)');
});
Any help would be appreciated.
I have generated some data from a MySQL query that I want to do two things with. The data is an array of names and IDs.
First I want to use the name portion for a jQuery autocomplete, so that the name is what you can select in the field.
Secondly, I want to fire on select in the autocomplete something that will place the ID of the selected item into a hidden field.
Here is my JQuery:
$("#contact").autocomplete(
source: function(request, response){
$.ajax({
url: "ajax/grabdata.php?",
type: "GET",
data: request,
success: function (data) {
response($.map(data, function (el) {
return {
label: el.item.name,
value: el.item.id
};
}));
}
});
},
width: 260,
matchContains: true,
selectFirst: false,
select: function(event, ui){
$('#contact').val(ui.label);
$('#id').val(ui.value);
}
});
Here is how I grabbed the data in PHP (grabdata.php):
$sql = "SELECT DISTINCT contacts.id, contacts.firstname, contacts.lastname FROMcontacts WHERE (firstname LIKE '%$q%' OR lastname LIKE '%$q%')";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
$kdata[] = array(
"name" => $rs['firstname'].' '.$rs['lastname']."\n",
"id" => $rs['ID']."\n",
);
$dataset[] = $kdata;
}
I can get the data, but I am having trouble parsing it into what I want. The name should be selectable in the autocomplete field, and the ID should be filled in based on the name chosen.
As far as I can see, you are not using the select method parameters as you should:
select: function(event, ui){
$('#contact').val(ui.item.label);
$('#id').val(ui.item.value);
}
You are missing the ".item". Check the documentation: http://jqueryui.com/autocomplete/#remote
I have this code,
$(function() {
//var asd = '<?php $regions_list_full; ?>';
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
//icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
//icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
//icon: "sizzlejs_32x32.png"
}
];
$( "#find" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#find" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#find" ).val( ui.item.label );
//$( ".module h1" ).val( ui.item.value );
$(":header.title").html(ui.item.value);
//$( "#project-description" ).html( ui.item.desc );
//$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
actually this is from the autocomplete of jQueryUI, and I have an array of values which are fetched from the database. What I want is to replace my values into the var projects =[{value:asd}] such that my suggestions of the autocomplete will be the data from the database. How would I do this?
You don't want to use source: projects you probably want to define a function for the source using an AJAX call like this
$( "#search_address" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: '/path/to/script',
dataType: 'json',
data: 'whatever you need here', // i.e. term value
dataFilter: function (data, type) {
// do whatever you need to here to change data into proper autocomplete array format
// if JSON data is already in correct format you can just do this.
response($parseJSON.(data));
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// handle error here
},
success: function(data) {
// maybe check for case of empty data object here (i.e. successful URL request, but no data returned)
return data;
}
});
}
});
Now you typically want to limit the number of results returned by your API (maybe 10 or 20 records at most), as it is likely a bad UI experience to have 1000 items show up in autocomplete. On a good autocomplete the number of results should decrease dramatically after a few letters have been types in. This also make you script perform much better in that you are only processing a handful of returned records. For the same reason, you may also want to use the minLength property of autocomplete to not even bother starting the request until X number of characters are entered.
Change
source: projects,
to
source: url_to_script
Form which script you'll send your json. See this example. If you see the source code, you'll see that in source property they use source: search.php.
Similarly, you can use your own script path and return a json data from that script, where that data will coming from server.
jQuery autocomplete will send a a querystring along to the url that you provide in the source: url , this query string will be term so remember that , because I don't think autocomplete docs tell you that , then from there you use the term querysting to query the database and send back items that start with term , You do not request every row in the database and store them in javascript variable, that would not make sense - what if there are 2,000,000 entries in the database?
I'm using JQuery UI Autocomplete to pull records from a caller database. This works fine for records that are in the database but I want to improve handling for new records.
For example, if a user chooses a name from a suggestion, I use the return id later in the form. This works fine. If the value is not found in suggestions I am struggling to trigger the script since it is currently triggered from a select event, and there doesn't appear to be a onblur event for this function which I think is what I'm after. I'm new to JQuery and have already spent a day trying to sort it.
Code so far is:
$("#contact_name").autocomplete({
source: "get-caller-names.php",
minLength: 2,
select: function(event, ui) {
$('#contact_id').val(ui.item.id);
$('#contact_name').val(ui.item.name);
$('#contact_email').val(ui.item.email);
$('#contact_phone').val(ui.item.phone);
$('#contact_addr').val(ui.item.address);
}
});
All suggestions welcome, thanks.
Code in case others have the same issue...
// auto-suggest jqueryui
$("#contact_name").autocomplete({
source: "GetCallerNames.php",
minLength: 2,
select: function(event, ui) {
$('#contact_id').val(ui.item.id);
$('#contact_name').val(ui.item.name);
$('#contact_email').val(ui.item.email);
$('#contact_phone').val(ui.item.phone);
$('#contact_addr').val(ui.item.address);
},
change: function(event, ui) {
$.ajax({
type: 'GET',
url: 'GetCallerNames.php',
dataType: 'json',
data: {term:$(this).val()},
success: function(data) {
if (data!=null&&data!='') {
$('#contact_id').val(data[0].id);
$('#contact_email').val(data[0].email);
$('#contact_phone').val(data[0].phone);
$('#contact_addr').val(data[0].address);
}
}
});
}
});
Could you not add a new handler for change eg:
$( ".selector" ).autocomplete({
select: function(event, ui) { ... },
change: function(event, ui) { ... }
});