We Keep Coding

Searchbar website : search by page title instead of page link Javascript

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>

Add setValue and getValue to JQueryUI Autocomplete

Goal: I want to add setValue and getValue functions to JQueryUI Autocomplete widget.
Assuming an autocomplete list has a datasource of id/label pairs, I want to call to setValue and getValue like this:
// this is how I *want* to call it
$("#tags").autocomplete('setValue', 2); // should select "two" in the list
$("#tags").autocomplete('getValue') // if "two" is selected, it should return 2
Here's the context HTML:
<script>
// if I pass in 2 for the id, it should select "two"
function setValueClick(){
$("#tags").autocomplete('setValue', 2);
}
// if "two" is the selected item, getValue should return 2
function getValueClick(){
console.log($("#tags").autocomplete('getValue'));
}
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" /> <br/>
<button onclick="setValueClick()">Set value to 2</button>
<button onclick="getValueClick()">Get value</button>
</div>
and the JS:
$.widget("ui.autocomplete", $.ui.autocomplete, {
setValue: function(id) {
// TODO: make this select the item corresponding to the id param
},
getValue: function(){
// TODO: make this return the id of the selected item
}
});
$(function() {
var availableTags = [
{ id: 1,
label: 'one'
},
{
id: 2,
label: 'two'
},
{
id: 3,
label: 'three'
}
];
$("#tags").autocomplete({
source: availableTags
});
});
And here's a jsfiddle start:
http://jsfiddle.net/spencerw/55jhx/149/

Okay, so I changed things up a little bit, but I feel it's for the better. Feel free to use this in any way you see fit.
You'll notice I added more attributes to the buttons (ele to both and value to the setter). The ele property should be set to the ID of the <input> element you want to modify/retrieve results from. The value property (in the setter) should be set to the id attribute of the availableTags object that you want to show the label of (not the index of the object within the availableTags array). I took out the onclick attributes, and am handling that in the JS, so I could remove the <script> tags from the HTML pane (this is more just to make it a little easier to read in jsFiddle).
Here's the modified HTML:
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" /> <br/>
<button class='setValueClick' value='2' ele='tags'>Set value to 2</button>
<button class='getValueClick' ele='tags'>Get value</button>
</div>
And the modified JavaScript:
$(document).on('click', 'button.setValueClick', function(){
var ele = $('#' + $(this).attr('ele'));
ele.autocomplete('setValue', $(this).attr('value'));
});
$(document).on('click', 'button.getValueClick', function(){
var ele = $('#' + $(this).attr('ele'));
alert(ele.autocomplete('getValue'));
});
$(function() {
var availableTags = [
{ id: 1, label: 'one' },
{ id: 2, label: 'two' },
{ id: 3, label: 'three' }
];
$.widget("ui.autocomplete", $.ui.autocomplete, {
setValue: function(id) {
var input = $(this.element[0]);
$.each(availableTags, function(k, v){
if(v.id == id){
input.val(v.label);
return false;
}
});
},
getValue: function(){
var val = $(this.element[0]).val(), ret = false;
$.each(availableTags, function(k, v){
if(v.label == val){
ret = v.id;
return false;
}
});
return ret;
}
});
$("#tags").autocomplete({
source: availableTags
});
});
You can see a working, super-documented, version of the answer here:
http://jsfiddle.net/hftn7oqw/

.change() doesn't work in Chrome when using autocomplete

.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">

Autocomplete for repeating text fields

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;
});

jquery autocomplete by textbox value

let u as consider the value am having in textbox so now if we type in that it automatically
have to show word with multi-value by comma. I have tried but no result.
Can any body help out of this problem.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function()
{
var val = document.getElementById('tags').value;
var availableTags = val == '' : [] ? val.split(',');
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<input id="tags" size="25" value="ACCENTURE 1,
BPCL KORAMANGALA,
CUNNIGHAM ROAD,
HM TOWERS,
GREATER NOIDA,
INFOSYS 3,
JAYANAGAR T BLOCK,
MILLENIA,
OZONE,
BKC,
FUN REPUBLIC,
MATUNGA,
VFS UK,
CYBER GREEN,
PRABHADEVI,
VRINDAVAN"/>
</div>

As per my understanding, your autocomplete(which I have tested in fiddle) is not populating. The reason is you ternary operator syntax is wrong.
var availableTags = val == '' : [] ? val.split(','); //WRONG
Change this to
var availableTags = val == '' ? [] : val.split(','); //CORRECT
See it is working in JSFiddle