Kendo UI how to change dropDownList to text field? - javascript

Once I create dropdown list from existing text field input in Kendo UI - is there a way of changing it back to text field?
$('#myInput').kendoDropDownList({...});
I wish to have something like:
var kendolist = $('#myInput').kendoDropDownList({...});
kendolist.textField({....});
or
kendolist.destroy().textField({....});
at best without extensive jQuery shenanigans... :)

I am afraid it is not possible to turn it back into regular textbox. You can use the destoy method of the widget, however there will be some HTML left which you will not really need and you will need to do some manually cleaning with JavaScript.
Better destroy the widget and remove all the HTML then add regular textbox manually.

Related

Capture key input on select (dropdown list) in JavaScript

I'm trying to capture the input on a dropdown in JavaScript when it is focused, but it appears to not throw events.
Without using a third party library, is there anyway to capture this input?
Example: http://jsfiddle.net/m4tndtu4/11/
you don't want a third party library, but tagged your question to jquery.
you also use jquery code inside your jsfiddle, and mix it with native js...
so i assume, that you would at least want to use jquery.
i edited your fiddle the following: http://jsfiddle.net/m4tndtu4/14/
i just deleted everything you wrote, and just entered one 'on' handler:
$("#sel1").on("keyup",function(){ //this captures selection changes
$("#output").css("background-color", "yellow").text($('#sel1 option:selected').text()); // change the css of output and set the text to the value of the selected option
var enteredSearchSequence = String.fromCharCode(e.which);
$("#input").css("background-color", "yellow").text(enteredSearchSequence);
});
currently, it shows only the last pressed key - and also don't work if SHIFT was pressed... but i guess, you can figure out, how to concat the keypress or even delete it, because it's treated as a new search.
btw. given that, you may want to take a look at angularjs or any other mvc - a list and a searchbox is quite easy with those frameworks!

Filtering table data based on search keyword using jQuery

I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.
On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?
Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.
You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.
HTML:
<input type = "text" id="theText">
JQuery to get it's current value and display it on the console:
$('#theText').onkeydown(function(){
var x = $('#theText').val();
console.log(x);
});
It's a little old now, but I've used this plug-in in a project before and it worked great:
https://github.com/riklomas/quicksearch

How to create a selectlist which is also a input text box?

I want to create a select-list like one shows in google mail search. The special thing of that selectlist is when we click over the select list it becomes a input text box and when we click over the right-side down arrow of that selectlist it shows a drop-down form which contains search options to search a specific mail.
I just want to know how to create a selectlist which also behaves like a input text box if we click over the box area ?
Can anyone please give me an idea to achieve this?
I hope you are looking something like this
http://ivaynberg.github.com/select2/select-2.1.html
Check it out
You can use jquery-ui autocomplete plugin.
Autocomplete - Combobox
you can have the detailed documentation here..
A jQuery UI Combobox: Under the hood
Have a look at this http://jqueryui.com/autocomplete/#maxheight. this is using JQuery

Remove Chrome Autofill text onclick with Javascript or JQuery

I'm having trouble removing the text that is generated by Chrome autofill with JQuery. Thus far I have been doing this.
$(document).ready(function () {
$(".link").click(function () {
$("#textbox").val("");
return false;
});
This removes the text just fine except if it was auto fill text. I would like to be able to remove this text without disabling autocomplete altogether i.e. I don't want to use autocomplete="off."
Right now I'm using JQuery but I'm not opposed to just using plain Javascript instead.
P.S. These text boxes are ASP.NET MVC3 Html.TextBoxFor's. I don't know if that makes a difference.
Perhaps you can use the autocomplete="off" attribute on elements or on the form itself. Related question here Is there a W3C valid way to disable autocomplete in a HTML form?

Displaying dynamic text

I need to display some text but the text is going to change a lot and I need for it to be editable. I know I can use from input but is there any other way?
MDN has a nice example and MSDN - here for contenteditable
<div id="toEdit" contenteditable="true" onkeyup="doSomething(this.id);"></div>
doSomething function can manipulate the data (store/send whatever).
You can use ajax query and change the value of the text area.. using that.. hope this help
you can put a little button (or use even the text itself as a handler) so that when a user clicks, you add the input to change the text using ajax.

Categories