So i'v found this code to search other pages from the main page of my website, and it works great, but the autocomplete shows the link of the page instead of the title of the page , can anyone help me to modify the code ?
<form id="form1" runat="server" class="online-form">
<div class="ui-widget">
<input id="tags" class="form-control" placeholder="Rechercher un service…" required="" />
</div>
</form>
<script>
$(function () {
var availableTags = ["page1.html","page2.html","page3.html"];
$("#tags").autocomplete({
source: availableTags,
select: function (e, ui) {
var value = ui.item.value;
window.location.href = "../" + value;
},
});
});
</script>
The best way to make what you want and still continuing using jQuery's autocomplete is to create an additional array with the links. On select we will check the position of the AvailableTags array and then use the new array for the redirect.
<script>
$(function () {
var availableTags = ["Page 1", "Page 2"];
var availableTagsLinks = ["page1.htm", "page2.htm"];
$("#tags").autocomplete({
source: availableTags,
select: function (e, ui) {
var value = ui.item.value;
var indexPos = $.inArray(ui.item.value, availableTags);
window.location.href = "../" + availableTagsLinks[indexPos];
},
});
});
</script>
Related
I tried to pass the autocomplete value into another function.
<body>
<input id="automplete" name = "name"></input>
<input type="submit" onclick="mufunc()"></input>
<script>
function mufunc(a){
alert(a);
}
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
"Ecommerce"
];
$("#automplete").autocomplete({
source: availableTutorials,
select: function(event, ui) {
if (ui.item) {
var seqps = new mufunc(ui.item.value);
}
}
});
});
</script>
</body>
Here autocomplete is works fine. I tried, it value pass into the mufunc() function and when i enter submit button that time only alert the autocompleted value.
But in my script when i fill the text field that time execute the mufunc() function. How can i manage it?
<body>
<input id="automplete" name = "name"></input>
<input type="submit" onclick="mufunc()"></input>
<script>
function mufunc(){
var a=document.getElementById('automplete').value;
alert(a);
}
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
"Ecommerce"
];
$("#automplete").autocomplete({
source: availableTutorials,
select: function(event, ui) {
if (ui.item) {
$('#automplete').val(ui.item.value);
}
}
});
});
</script>
</body>
Without passing the varaible to another function it is possible. Because your textfield values is store into the autoomplete id then easily get the value of this id and do it.
you enter submit button that time only alert the autocompleted value. you can try to pass input id into call the function onclick="mufunc(automplete)"
.change() event doesn't work in Chrome when using autocomplete script and work when enter another value doesn't exist in autocomplete ...
but my code is totally working fine in Firefox
my code as the below
$('body').on('change', 'input[name^="itemNo"]', function(){
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
})
and my html code as the below
<input type="text" data-type="product_serial" name="itemNo[]" data-maxquant="" id="itemNo_1" class="form-control autocomplete_txt serial_number_append" autocomplete="off">
Use the autocomplete's change event. You can bind it using the 'autocompletechange' event:
$('input[name^="itemNo"]').on( "autocompletechange", function( event, ui ) {} );
or on initialization, as in the following example:
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$('input[name^="itemNo"]').autocomplete({
source: availableTags
}, {
change: function(event, ui) {
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=https://code.jquery.com/ui/1.11.2/jquery-ui.js "></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<input type="text " data-type="product_serial " name="itemNo[] " data-maxquant=" " id="itemNo_1 " class="form-control autocomplete_txt serial_number_append " autocomplete="off ">
See documentation for further information: autocomplete API
This works for me in chrome. The change event is called when the input field loses focus
$('body').on('change', 'input[name^="itemNo"]', function(){
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" data-type="product_serial" name="itemNo[]" data-maxquant="" id="itemNo_1" class="form-control autocomplete_txt serial_number_append" autocomplete="off">
good afternoon all!
i spared a lot of time, read all posts on stackoverflow... and i am not able to make autocomplete working with multilpe input fields.
I tried to attrib a 'autoc' class to each input, i use a different id for each field (in fact the inedx of the php loop generating fields).
I do not ask someone to do the job for me.... just a working example.
Thanks in advance.
PS : I apologize for my poor english...
now follows a piece of html :
<input id="search_ctO" class="autoc" type="text" name="search_ct[]">
<input id="search_ct1" class="autoc" type="text" name="search_ct[]">
<input id="search_ct2" class="autoc" type="text" name="search_ct[]">
....
<input id="search_ctn" class="autoc" type="text" name="search_ct[]">
and jquery :
$('.autoc').on("focus", function()
$(this).autocomplete({
minLength: 2,
source: 'liste_contact.php',
select: function( event, ui ) {
$('.autoc #search_ct').val( ui.item.label ); //id="search_ct'.$i.'
$(".autoc #contact_id").val( ui.item.value ); //
$("autoc #contact_description").val( ui.item.desc );
return false;
},
change: function(){
var servi = $("#service_id").val();
var hop = $('#hop').val();
var contact = $("#contact_id" ).val();
$.ajax({
url: 'ajout_contact.php',
data: "serv="+ servi+"&hopit=" + hop+"&contact="+ contact+"",// on envoie la requete d'ajout de contact
success: function() {
$("#search_ct").val('');
// location.reload(true);
}
Without knowing the exact HTML and the object array passed to autocomplete source, it is difficult to make your code exactly.
However, you have asked about working of autocomplete for multiple fields, so here is just a simple example:
HTML
<input id="search_ctO" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct1" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct2" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ctn" class="autoc" type="text" name="search_ct[]"/>
JS
var tags = ["abc","def","xyz"];
$('.autoc').on("focus", function(){
$(this).autocomplete({
minLength: 2,
source: tags
});
});
JSFIDDLE DEMO
If there is any other thing you want to be included in answer, feel free to comment.
EDIT
Your code,
$('.autoc').on("focus", function() {
$(this).autocomplete({
minLength: 2,
source: 'liste_contact.php',
select: function( event, ui ) {
$('.autoc #search_ct').val( ui.item.label );
$(".autoc #contact_id").val( ui.item.value );
$(".autoc #contact_description").val( ui.item.desc );
return false;
},
change: function() {
var servi = $("#service_id").val();
var hop = $('#hop').val();
var contact = $("#contact_id" ).val();
$.ajax({
url: 'ajout_contact.php',
data: "serv="+servi+"&hopit="+hop+"&contact="+contact+"",
success: function() {
$("#search_ct").val('');
}
});
}
});
});
Good day! I have a form that enables a user to dynamically add and remove input text fields.
Each text field should suggest some values or autocomplete. Adding and removing fields are successful. However, only the first text field autosuggests.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = #Html(Json.toJson(tagNames).toString);
var scntDiv = $('#addMore');
var i = $('#addMore p').size() + 1;
$('#addRT').live('click', function() {
$('<p><label for="tags"><input id="tags" type="text" name="relatedTags.tag.name" placeholder="Name"/></label> Remove</p>',
function() {
$( "#tags" ).autocomplete({
source: availableTags
});
}).appendTo(scntDiv);
i++;
return false;
});
$('#remRT').live('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
$(function() {
var availableTags = #Html(Json.toJson(tagNames).toString);
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
But the same problem persists. Please help me figure this out. Thank you very much!
Following my comments, this should solve at least your autocomplete function. The ID is dynamically created by using the iterator you already had in your code.
$('#addRT').live('click', function() {
$('<p><label for="tags"><input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name"/></label> Remove</p>').appendTo(scntDiv);
$( "#tags"+i ).autocomplete({
source: availableTags
});
i++;
return false;
});
JS is still a little unnatural to me. I can read it alright, but writing it is something I seldom get the chance to do.
I have this form (simplified)
<form>
<div class="form_element">
<label for="co">Cust Company:</label>
<input type="text" name="co" value="" id="co" />
</div>
<div class="form_element">
<label for="contact">Cust Name:</label>
<input type="text" name="contact" value="" id="contact" />
</div>
</form>
I got the auto-complete working just fine for the #co input, but I can use a little guidance getting the next step working.
I need to auto-suggest Names for the #contact input based on the #co selection.
My JS currently looks like this
<script type="text/javascript">
$('input#co').autocomplete({
minLength: 2,
source: function( request, response1 ) {
url_1 = 'company/get_names/'+ request.term +'/name/json'
$.getJSON(url_1, function(companies) {
response1(companies);
});
},
select: function(event, company){
$('input#co' ).val( company.item.value );
//alert(company.item.id); // For testing
url_2 = 'contact/persons_list/'+ company.item.id +'/json'
$('input#contact').autocomplete({
source: function( request, response2 ) {
$.getJSON(url_2, function(people) {
response2(people);
});
}
})
}
});
</script>
How do I get the suggestion-list of people/contacts to show up for the #contact input once a value/suggestion is selected for the #co input?
Well ... I ended up taking a completely different approach, and I think it's much better than my first line of thought.
<script type="text/javascript">
var co_id;
$('input#co').autocomplete({
minLength: 2,
source: function( request, response ) {
url = 'company/get_names/'+ request.term +'/name/json',
$.getJSON(url, function(companies) {
response(companies);
});
},
select: function(event, company){
$('input#co' ).val( company.item.value );
co_id = company.item.id;
}
});
$('input#contact').autocomplete({
//minLength: 2,
source: function( request, response ) {
url = 'contact/persons_list/'+co_id+'/json',
$.getJSON(url, function(companies) {
response(companies);
});
}
});
</script>
It works great!