Datalist disappear when inputing a white space - javascript

I'm trying to create an input bar that suggest tags.
We can enter differents tags by separating them with a white space.
I'm using a datalist to suggest tags, and I developped it to only match the characters after the last white space (e.g.: if I input "stack overfl", the datalist will suggest tags that match with "overfl").
It works well with the first tag, but at the moment I enter a white space, the datalist will update itself correctly but won't show. Does anyone know how to fix this ?
Here is my code for updating the datalist.
$("#tagInput").keypress(function (e) {
//Get value of input element
var input = $(this).val() + String.fromCharCode(e.which);
//Remove every characters before the last white space
while(input.indexOf(' ') > 0) {
input = input.substr(input.indexOf(' ') + 1);
}
console.log(input);
//suggest = datalist
var suggest = $("#suggest");
//Removing every elements from datalist
suggest.empty();
//Get every matching tags
var suggestion = getSuggestion(input);
for(let i = 0; i < suggestion.length; i++)
suggest.append("<option value='"+suggestion[i]+"'></option>");
})
function getSuggestion(input){
var result = [];
for(let i = 0; i < window.tagList.length; i++){
if(window.tagList[i].toLowerCase().includes(input.toLowerCase(), 0))
result.push(window.tagList[i]);
}
return result;
}

Related

Unable to unselect a word in a textarea after setting a selectionRange

I would like to be able to select a word, and unselect a word in a textarea programmatically. I am able to select a word in a textarea, by using the code below. However, the word remains selected after executing the removeAllRanges() and removeRange() method. Is there something I am missing to actually unselect the word? I would appreciate any assistance you can provide.
let textarea = document.getElementById("textarea");
let startPosition = 0;
let stopPosition = 15;
if (textarea.setSelectionRange) {
textarea.setSelectionRange(startPosition, stopPosition);
}
// This line does not clear the selected word
document.getSelection().removeAllRanges()
// Does not clear the selection
let s = window.getSelection();
if(s.rangeCount > 1) {
for(var i = 1; i < s.rangeCount; i++) {
s.removeRange(s.getRangeAt(i));
}

trying to save a h1 text.event to a variable so when you type the first letter it saves

and then you can type the second keypress and so forth
so you can type you own name in the h1 or what every you want
or is the only way to do it via $("input") I don't want a textbox
$(document).keypress(function(event) {
$("h1").text(event.key);
});
do I use a for loop to save the first letter into an array or "keypress" + "text(event.key)" + "?
then add the second to indice 1?
for (var i = 0; i < $("h1").text(event.key).length; i++) {
var textType = $("h1").text(event.key)
});
thanks in advance, trying to wrap my head around it
You just need to append the newest character on to whatever the text of the h1 currently is.
let firstLetter = "";
$(document).keypress(function(event) {
$("h1").text($("h1").text() + event.key);
firstLetter = $("h1").text()[0]; // Save the first letter
console.log(firstLetter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1></h1>

How Do I Add Ellipses to Text

I am trying to create a function that will take an element's text, cut off any characters beyond 80, and add an ellipses if necessary. Here's my code so far:
var maxLength = 80;
function shorten(element) {
var text = $('#' + element).text();
var ret = text;
if (text.length > maxLength) {
text = text.substr(0,maxLength-3) + "...";
}
$('#' + element).text(text);
}
shorten('slide1');
So, the function should take the element, remove extra text off the end, add an ellipses, and then replace the old text in the element with the new string I've just created.
When I run the function, I don't get any errors, but it doesn't actually cut off the text as it should. Why is this?
var text = "Some Text Goes Here. La La La La!";
var textLength = 10; // Number of characters to cut off after
function shorten(text, textLength){
if(text.length > textLength){
text = text.substring(0, textLength) + '…';
}
return text;
}
var shortText = shorten(text, textLength);
Also, using the HTML character for ellipsis is better than using three periods.
I've added a Codepen showing the code working. Additionally, I added a function spaceShorten that will split your text at the last occurrence of a space that is less than the length provided, so you don't split the text mid word.
http://codepen.io/supah_frank/pen/EaYzNz

javascript not changing the text color

I have a function that I want to change the font color of the user entered string if it is equal to a certain word located in an array.. So far when I step through it it says that it changes the font color but it actually never updates it to the screen and I don't know why. Here is what I have so far
function getLastWord() {
var input = document.getElementById("my_text");
//var input = document.getElementById(textArea.value);
//var lineIn = document.getElementById(my_text).innerHTML;
var inputValue = input.value;
var lastWordTyped
var changeColorOfWord;
if (input == null) {
input == " ";
}
//lastWordTyped = input.substr(input.trim().lastIndexOf(" ") + 1);
lastWordTyped = inputValue.substr(inputValue.trim().lastIndexOf(" ") + 1);
if (input != null) {
for (var i = 0; i < reservedKeyWords.length; i++) {
if (reservedKeyWords[i] === lastWordTyped) {
lastWordTyped = lastWordTyped.fontcolor("blue");
my_text.replace(inputValue, lastWordTyped);
} else {
}
}
}
}
I see two issues with the code thus far.
You are using 'fontcolor("blue")' parameter on the lastWordTyped. The proper syntax to change color is element.style.color="#CCC".
You will need to wrap the last typed word in a span so you can target it and apply the color to just that word.
string.fontcolor is legacy, and should not be used even though I could see it as a viable option in this case
Essentially, what you are doing is adding font tags around the word:
var txt = 'hello world';
txt = txt.fontcolor('blue');
//txt = '<font color="blue">hello world</font>';
You do not show what you do with the result, but if you actually put it in an HTML element it should work, even though instead of using fontcolor, I'd rather use element.style.color. This would require slightly more work though:
var ele = document.querySelector('#my_text');
ele.style.color = 'blue';
ele.innerHTML = lastWordTyped;
If you still want to go with the .fontcolor method, you could just keep what you have in the question and add
input.innerHTML = my_text;

Disable input after submit and count array element

function limitofTags(){
var tags = $('div').find('.tag').map(function(){
return $(this).text();
}).get();
var elem = [];
for (var i = 0; i < tags.length; ++i){
//store array elements
elem.push(tags[i]);
if(elem.length < 2){
$("#tags").prop('disabled',false);
}
else{
$("#tags").prop('disabled',true);
}
}
}
As for html, it is small div with button. When I type tags in input textfield, it will be appended to div area. When tags are more than 2, input textfield will be disabled to prevent more tags from being added. After submit the form, div showed the same number of tags but input textfield won't stay disabled. So how to make input textfield stay disabled if tags are more than 2 in div?
Appreciate the insight or help. I have been searching for online answers but seem not to find what I need the input text disable after submit.
You should probably check the length after the array is populated, and you're creating an elem array that is exactly the same as the tags array you have :
function limitofTags(){
var tags = $('div').find('.tag').map(function(){
return $(this).text();
}).get();
$("#tags").prop('disabled', tags.length >= 2);
}

Categories