i have one issue with jquery autocomplete, its working with one textbox perfect but when i create multiple textbox using jquery with same ID at that time its working for only first textbox not for another textbox .
my question is i want to create multiple textbox and implement same autocomplete data with all text box
this is my code for create textbox using jquery
var totalSelect = $('#max_player').val();
$('#competitor_box').empty();
for (var i = 1; i <= totalSelect; i++) {
var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input id="autocomplete-ajax" type="text" class="form-control" autocomplete="off"></div>';
$('#competitor_box').append(ajaxauto);
}
this code for ajax autocomplete
$('#autocomplete-ajax').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});
please help me for this issue its very important for me
thanks all.
var totalSelect = $('#max_player').val();
$('#competitor_box').empty();
for (var i = 1; i <= totalSelect; i++) {
var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input class="txtAutocomplete" type="text" class="form-control" autocomplete="off"></div>';
$('#competitor_box').append(ajaxauto);
}
Autocomplete function
$('.txtAutocomplete').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});
why did you use the same ID for severals input ? use classes if you have to tag multiples elements, for example .autocomplete-ajax-input on each textbox. And then declare your autocomple function with $('.autocomplete-ajax-input').autocomplete
Related
I want to store the previously selected option when navigating with the keyboard. I have achieved this if the user clicks on the drop down but it doesn't store the option if navigated with the keyboard.
Code:
CreateDropDown: function (id) {
var me = IndexController;
$("#Drop" + id + "").kendoDropDownList({
name: "drop" + id,
dataTextField: "text",
dataValueField: "value",
valueTemplate: '<i class="#:data.icon#"> </i></span><span>#:data.text#</span>',
template: '<i class="#:data.icon#"> </i>' +
'<span class="k-state-default"><p>#: data.text #</p></span>',
dataSource: me.variable.options,
index: 0,
change: me.onChange,
open: function (e) {
me.options.previousOption = e.sender.value();
}
});
me.AddShortText(id, "Short Answer");
}
and I can use the value:
AddShortText: function (a, ChoiceText) {
var me = IndexController;
if (me.options.previousOption == "2" || me.options.previousOption == "3")
$("#TypeDiv" + a).children(".toRemove").remove();
else
$("#TypeDiv" + a).children(".group").remove();
$("#TypeDiv" + a).append('<div class="group" style="width:50%">\
<input id="Answer'+ a + '" type="text" class="inputHighlight" disabled >\
<span class="bar"></span>\
<label class="labelHighlight">'+ ChoiceText.trim() + '</label>\
</div>');
},
GIF:
Thank you in advance
Use the select event https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/select
The select function is triggered both with keys or mouse
$("#Drop").kendoDropDownList({
// your code
select: function(e) {
me.options.previousOption = e.sender.value();
}
});
I've looked through a number of responses and can't for the life of me figure out why my code isn't working!
I want to apply a simple custom filter to a variable passed from the controller. The room-price value displays fine. however, when I add the price-per-night filter the value disappears.
Can anyone suggest a solution?
Thanks
Template
<div class="h3 left-align p1" ng-bind="room.price | price-per-night"></div>
Controller
routerApp.controller('MyController', function($scope) {
$scope.rooms = [
{
name: 'Basic',
price: 50
}]
});
Filter
routerApp.filter("price-per-night",
function() {
return function(price) {
var output = '£' + price + ' ' + 'per night';
return output;
};
}
);
Name your filter pricePerNight. - is not allowed in the name:
routerApp.filter("pricePerNight",
function() {
return function(price) {
var output = '£' + price + ' ' + 'per night';
return output;
};
}
);
(You still use price-per-night in your HTML)
<input type="text" autocomplete="off" class="Autocomlete1" name="test">
$('.Autocomlete1').typeahead({
ajax: {
url: './test.php?log=test',
triggerLength: 1
},
updater: function(item) {
return item;
},
onSelect: function(item) {
return item;
}
});
After autocomplate in input we get nextvalue - Text " TextTextText " (database row have it value) but need output Text " TextTextText "
For replace " on " i want make:
onSelect: function(item) {
var text = item.text;
var text = text.replace(/"/g, '"');
$('.Autocomlete1').val(text);
return item;
}
But this is not working...
Tell me please how right replace " on quotes ?
if not working var text = text.replace(/"/g, '\\"'); check other lines becouse it worked for me.
" is also needs a escape character before in string write '\"
var text = text.replace(/"/g, '\\"');
The first block of code is a working example of what I want the variable select to do. the var Select is there to be a td in the variable tr. the variable tr is used 2 times in this code. once to to append the tr when the table has html and another time when it doesn't have any html. the reason is because if doesn't have html it should append the header and the row with the select element and the rest of the data that's supposed to be on the row and if does have html it should only append the row to prevent repetition of the header. so I would like a nice clean variable named tr that will be append every time the users invokes it. jsfidle if you click on the drop down you could select the item and the new row will appear.
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Item:</strong> ' + suggestion.value + ' <br> <strong>price:</strong> ' + suggestion.data + "<br>" + suggestion.divs;
var tableheader = ($("<thead>")
.append($("<tr>")
.append($("<th>Item</th><th>Qty</th><th>Price</th>")))
)
var select = " <select class = 'select'><option value='volvo>Volvo</option> <option value='saab'>Saab</option> <option value='mercedes'>Mercedes</option> <option value='audi'>Audi</option> </select>"
var tr = "<tr><td>"+ suggestion.value + "</td><td>" +select +"</td></tr>"
if($(".table").html().length <= 0)
{
$('.table').append($("<table>")).append(tableheader).append(tr);
}else{
if($(".table").html().length > 0){
$(".table").append(tr)
}
}
The thing is I want the select element to be made up dynamically so i tried something and I cant figure out why it wont work. It's not recieving the variable. Am i implementing the varable wrong with the $.each?
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Item:</strong> ' + suggestion.value + ' <br> <strong>price:</strong> ' + suggestion.data + "<br>" + suggestion.divs;
var tableheader = ($("<thead>")
.append($("<tr>")
.append($("<th>Item</th><th>Qty</th><th>Price</th>")))
)
var selectValues = { "3": "2", "2": "1" , "1": "..."};
var select = $.each(selectValues, function(key, value){
$('.select').append($('<option>', {value: value}).text(value));
// <option value='volvo>Volvo</option>
});
var tr = "<tr><td>"+ suggestion.value + "</td><td><select class ='select'>" + select + "</select></td></tr>";
if($(".table").html().length <= 0)
{
$('.table').append($("<table>")).append(tableheader).append(tr);
}else{
if($(".table").html().length > 0){
$(".table").append(tr)
}
}
},
maxHeight:100,
width:600
});
thanks for your help
Why use object if you use only value?
if you realy don't need key juste create an array :
var selectValues = ["2", "1", "..."];
var value;
var select = selectValues.forEach(function(value){
$('.select').append($('<option>', {value: value}).text(value));
// <option value='volvo>Volvo</option>
});
// or if you want more compatibility
for (var i = 0, len = selectValue.length; i < len; i++) {
value = selectValue[i];
$('.select').append($('<option>', {value: value}).text(value));
});
Edit:
i make some mistake sorry.
first forEach will return nothing so it's can't work.
I test with your fidle. try this (replace by old for loop if you don't want to use map).
var select = selectValues.map(function(value){
return "<option value=" + value + ">" + value + "</option>";
// <option value='volvo>Volvo</option>
}).join('');
first you do not have to append from $('.select') because this dom not exist at this moment
and you can't concate an array in a string like this.
I'm Using Dropdownlist for verticals and a Multiselect listbox for accounts and a button in a viewpage. When I change the dropdown(verticals) Multiselect listbox will be visible and populated with corresponding Accounts.when I'm selecting the items(Accounts) from multiselect listbox, I want get the selected values as comma separated values in a variable. I'm Using the following jQuery:
$(document).ready(function () {
$('#acc').hide();
$('#ddlacc').hide();
$('#smt').click(function () {
var vertical=$('#vdropdown :selected').text();
var selectedvalues = $('#ddlacc > :selected').map(function () { return $(this).val(); }).get().join(',');
var account = $('#ddlacc > :selected').map(function () { return $(this).text(); }).get().join(',');
getGrid(vertical,account);
});
});
here is the html helper i'm using for dropdown,
<b>Vertical : </b>#Html.DropDownList("Var_Vertical", new SelectList(Model.lstTravelReadyEntities, "Var_Vertical", "Var_Vertical", Model.lstTravelReadyEntities), " ", new { id = "vdropdown", #onchange = "javascript:GetAccounts(this.value);" })
Following is the function for populating multiselect listbox,
function GetAccounts() {
var url = "/Home/Account/";
$.ajax({
url: url,
data: {},
cache: false,
type: "POST",
success: function (data) {
var markup = "";
for (var x = 0; x < data.lstTravelReadyEntities.length; x++) {
markup += "<option value=" + x + ">" + data.lstTravelReadyEntities[x].Var_AccountName + "</option>";
}
$('#acc').show();
$('#ddlacc').html(markup);
$('#ddlacc').multiselect();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
Here i can get only last selected item in a variable(selectedvalues). What change i have to do for getting comma separated value in a variable(selectedvalues)?
With multiSelect plugin you need to use the getChecked method of the plugin:
So:
var allChecked = $('#ddlacc').multiselect('getChecked'); //get the checked cached elements
var selectedvalues = $(allChecked).map(function () {
return this.value; //get the values
}).get().join(',');
var account = $(allChecked).map(function () {
return this.title; //text stored as title
}).get().join(',');
Demo
Seems you're using erichynds jQuery multiselect
http://www.erichynds.com/blog/jquery-ui-multiselect-widget
You can get all selected elements with method getChecked()
var str='';
$("select").multiselect("getChecked").each(function(){str+=this.value+','});