We Keep Coding

Event handler keypress loading at beginning of page instead of on input

I have an HTML input box and want to use jQuery to get the value of user input as it is entered, however the DOM seems to be activated upon page load and it never takes the value of the input box as the user types it in. I'm new to this and can't figure out what I'm doing incorrectly, any ideas would be appreciated!
<input id="textFilter" type="text">
function addEventHandlerForSearch() { //Javascript Handler
$('#textFilter').val();
$('#searchText').text($('#textFilter').val());
let searchVal = $('#searchText').text();
$(document).ready(function() { // DOM
$('#textFilter').keypress(addEventHandlerForSearch());
loadSavedRunkeeperTweets().then(parseTweets);
});

Simple vanilla implementation to get the value of the text box as it is typed would be:
const input = document.getElementById('textFilter');
input.onkeyup = () => {
console.log(input.value)
}
Then you could do whatever you need to with that data. If jquery is a requirement, I apologize for not including that in my answer. Not my area of expertise lol.

Removing focus from input box that was focussed earlier

I have one more input box - ibox2, on the same page.
Problem - After doing anything on ibox1 and leaving value of length > 5 there, if I start typing in ibox2 the focus jumps back to ibox1.
It is that if loop with ibox1.focus() that is doing it. How could I remove focus entirely from ibox1 upon clicking outside and nullify the if loop and its statements.
I tried blurbut it did not work.
var ibox1 = $("#inputbox1");
$(document).on("change", ibox1,function(e) {
var valu = ibox1.val();
if(valu.length > 5){
#do something
ibox1.focus(); #used this as input box lost focus with each charater typed.
}
});
var ibox2 = $("#inputbox2"); #This is for google places autocomplete.
PS - Please do not tag it as a duplicate one, I have tried almost everything here, and only then I posted this. I shall remove it upon getting solution.
Respected mods, I followed a nice accepted answer and made a mistake about understanding $('document'), but I now got it cleared. That's the reason I am not deleting this question, even though I said I would, as it might help others. You guys, if
you feel, could delete this. Thanks.

The focus is jumping back to ibox1 because you are instructing your document to do so each time the onChange event is fired.
e.g.: $(document).on("change", ibox1, funct... where you are calling for ibox1.focus(); `.
Possible solution: bind your change event to the element of interest itself and avoid binding an event of such local significance to the whole document in the future.

Use a simple method to attach an event to inputs. Check below code it may help you.
(function(){
var in1 = jQuery('#input1'); // first input
var in2 = jQuery('#input2'); // second input
// On change of first input
in1.change(function(){
if(this.val().length > 5){
// do something
}
});
// On change of second input
in2.change(function(){
if(this.val().length > 5){
// do something
}
});
})();

can JavaScript create a new function based on user input?

I have an input box, and a button and other random elements in the HTML document. my question is this: can JavaScript use an id that is entered into the input box and hide the element with that Id when the button is clicked? please let me know how to do this. I am making a program that creates elements based on certain button clicks, so the user can format html without knowing code. I am trying to add dynamic functions and I have absolutely no idea what to do, because the functions need to be flexible enough to use the input in them.
the reason I can't insert the functions directly is because I want the button to use a function that is specifically created to do what the user wants.
I also dont know jquery, inly HTML JavaScript and CSS

Yes, but you are on entirely the wrong track: you don't need to create a new function in response to user input to do that.
You just need to use user input in a function.
function myEventHandler(event) {
var user_input = document.getElementById('my_text_input').value;
var user_selected_element = document.getElementById(user_input);
if (user_selected_element) {
user_selected_element.style.display = "none";
}
}
document.getElementById('the_button').addEventListener('click', myEventHandler);

You'll need to create a function that is passed to the button's click handler. When the button is clicked, we can get the input's value and process it from there. Here's a working fiddle.
function hideById() {
var id = document.getElementById('id').value;
document.getElementById(id).style.display = 'none';
}
document.querySelector("button").addEventListener("click", hideById);

Change the title of a page while typing

As an exercise for myself I'm trying to make a blog posting application using JavasScript, JQuery and PHP. What I want to happen is that, when you're typing, the title of the page changes. With this, I mean the title declared within the <title></title> tags. A good example of this is StackOverflow: when you're asking a new question, you type in the title of that post, and the page title (the one declared inside the <head>) changes to the title you are typing.
How is this effect done? Is it possible using only JavaScript/JQuery or do you need AJAX for it?

You can just change the title with JS:
document.title = 'New title';
About the effect you are looking for you can probably do something in the lines of:
$(document).ready(function() {
$("input").keyup(function() {
var text = $(this).val();
document.title = text;
});
});

I'm not sure but I think you want to change the page title to whatever is typed in a input tag, For example
something like this?
$(document).ready(function () {
$('#myInput').keyup(function () {
$(document).attr('title', $('#myInput').val());
});
});
the above will track the changes of key up (on keyboard) and get the value of the text input and set it as page title :
here a working fiddle: http://jsfiddle.net/ZLPfM/show

To change the page title, you can do one of two things:
//plain javascript
document.title = 'My JavaScript title!';
//jQuery
$(document).attr('title', 'My jQuery Title');
In order to change it while typing, hook up an keyup event:
$(document).keyup(function(e)
{
//Check the keycode using e.keyCode
});
This will bind it to the document, which means anytime a key is pressed, within an input or otherwise, your event will fire. You could also bind it to a textbox so that it will only fire when you type within the input (which is probably what you want to do).
If you bind to the document, like shown above, you'll have to check the keyCode and append the value onto your title. If you bind to an input, you can grab the input value and set the title to the new value:
$('#myinput').keyup(function(e)
{
var text = $(this).val();
document.title = text;
});

How to rebind a Kendo ListView after changing template

I'm attempting to rebind the listview data after changing the template, based on a DropDownList value. I've included a JSFiddle for reference. When I rebind currently the values in the template are undefined.
Thanks!
JSFiddle link
I was thinking the best way to handle it would be in the 'select' or 'change' function:
var cboDetailsCategory = $("#detail").kendoDropDownList({
data: [
"All",
"Customer",
"Location",
"Meter",
"Other"],
select: function (e) {
var template = $("#" + e.item.text()).html();
console.log("template", template);
$("#details").html(template);
},
change: function (e) {
},
please refer to the JSFiddle link and this graphic as a visual
Here is a lengthier workflow:
User completes a name search and clicks a search button.
Name results are populated in a listview, rendered individually as button controls using a template.
User then clicks one of the name results (shown as the button text).
A dropdownlist of categories ('All' <--default , 'Location', 'Customer'...) gives the user the ability to target what subject of data they want to see. 'All' is the default, showing all details about the selected name.
So by default the 'All' template is populated.
If user wants to see the 'Location' details (template) they select it from the dropdownlist.
The template shows but the values are all blank. The only way to populate it is to click the name (button) again.
I want to remove the need for having to re-click the button (name) to populate the template ('Location', etc...).
I have put together a JSFiddle showing the structure. Though due to the data being private and served over secure network I cannot access it.
Refer to JSFiddle:
I believe the issue is that the onclick event grabs the data-uid and passes it to the initial default template (named 'All' but it's not included in code as it's lengthy). When the user changes the dropdownlist (cboDetailsCategory) and selects a new template I lose the data.
Thanks for your help. I'm really stuck on this and it's a current show stopper.

There isn't an officially supported way to change templates, without destroying the listview and rebuilding it. However, if you don't mind poking into into some private api stuff (be warned I can't guarantee that kendo won't break it without telling you) you can do this
var listview = $("#MyListview").getKendoListView();
listview.options.template = templateString;
listview.template = kendo.template(listview.options.template);
//you can change the listview.altTemplate the same way
listview.refresh(); //redraws the elements
if you want to protect against unknown API changes you can do this, which has A LOT more overhead, but no risk of uninformed change (untested!)
var listview = $("#MyListview").getKendoListView(),
options = listview.options;
options.dataSource = listview.dataSource;
listview.destroy();
$("#MyListview").kendoListView(options);

Here's the solution, thanks for everyone's help!
JSFiddle Link
The issue was where I was setting the bind:
$("#list").on("click", ".k-button", function (e) {
var uid = $(e.target).data("uid");
var item = dataSource.getByUid(uid);
var details = dropdown.value();
var template = $("#" + details).html();
$("#details").html(template);
kendo.bind($("#details"), item);
currentData = item;
});