Typeahead input element styling - javascript

I have a simple textbox input that looks like this:
<input type="text" placeholder="Search for states">
and I want to do an autocomplete on it, similar to typeahead. The autocomplete part works, but I want to display in the textbox first suggestion:
For instance, having written "Al" and I get the following suggestions:
Textbox: Al
Alabama
Algeria
I want to have in the textbox, as faded text: Alabama (the abama to be faded).
How can I do this with jQuery or pure JS?
Having basically in the same textbox, 2 text styles for 2 substrings?
If there are other methods (e.g. overlaying another transparent text control on it) and you can show me an example that would be great. I cannot change the input element (that is a given).

code pen:
http://codepen.io/mozzi/pen/XKKJWq
this is very slimier to what you need. I've selected text instead of fading it as you can't do half faded text in a text box. let me know what you think.
HTML:
<div class="ui-widget">
<label for="automplete-1">Type state name: </label>
<input id="automplete-1" placeholder="U.S. state name">
</div>
javascript:
$("#automplete-1").autocomplete({
delay: 0,
source: UsStateNames,
response: function(event, ui) {
var start = $("#automplete-1").val().length;
$("#automplete-1").val(ui.content[0].value);
var end = ui.content[0].value.length;
$("#automplete-1")[0].setSelectionRange(start, end);
}
});

Related

jQuery - How to drop content to concrete position into INPUT?

I'm solving such a problem with Drag&Drop via jQuery.
I have a simple HTML where there are MARK elements inside the LABEL, which I make draggable. Then I want to transfer these elements to INPUT (text). For CSS using PicoCSS.
JS:
$(document).ready(function () {
$("mark").draggable({
helper: "clone"
});
$('input[type="text"]').droppable({
drop: function (event, ui) {
this.value += ui.draggable.text();
this.focus();
}
});
});
HTML:
<label for="MF">
Any information about XYZ... Drag and drop to input: <mark>Item1</mark>, <mark>Item 2</mark>,<mark>Item 3</mark>
<input type="text" id="MF" name="MF" placeholder="Drop there" required>
</label>
I can do that thanks to the code, but DROP always puts the content at the end of INPUT. Is there any way to modify the code to insert content at a specific position of INPUT?
It may be that there is a string in the INPUT, e.g. "Yesterday I met ? and told me that...". And I need to drag the text from the MARK with the mouse to the question mark, and the text will be inserted (dropped) at that position to the question mark. Unfortunately, so far it works by drop (insert) only at the end. The need is to keep everything in forms, the data will be retrieved from the DB, further processed and stored again in the DB.
You can run it there - https://codepen.io/vontrips/pen/jOYzGOM

how to get highligted (blur) area in text box in angular javascript

I have a text element and I want to get the section that is highlighted selection by mouse only, so lets say user writes 123456798 in the textbox and then select 456 with mouse and I want to get 456, how can I do that ? Does angular library provide me something for it ? Couldnt find in methods.
Here is my complete html code for the part.
Actually I entered it but needed to remove first and last <> characters
<input type="text" id="dialpadText" call-from-dialpad="startAudioCall()"
ng-model="dialpadText"
ng-change="dialpadTextEntered()"
placeholder="Enter a name or number" autofocus=""
class="ng-valid ng-touched ng-dirty ng-valid-parse ng-modified">
If I understood your question correctly then you wants to get or alert the highlighted value being selected by mouse, right? If that is so, then here is the solution, simply with the help of JavaScript, you can alert the selected value of portion of the text:
<input type="text" onBlur = "getSelectionText()">
<script>
function getSelectionText(){
var selectedText = ""
if (window.getSelection){ // all modern browsers and IE9+
alert(window.getSelection()); //it will alert the selected value
}
}
</script>

javascript onblur starts too soon

I have a div containing an input followed by an ul :
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
value
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.
HTML code :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
One li :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
I repeat my question with code :
I have a div containing an input followed by an ul :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.
I'm tired, I'll go to bed :-)
My answer was on wrong page. Shoot again :
I have a div containing an input followed by an ul :
<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>
ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.
One li looks like that :
<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>
The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.
The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.
Thanks.

Changing JS mask on_focus to on_load or equivalent

Currently, my text field will only change its appearance after clicking on it (see attached screenshot). I am trying to change it so that it appears like that all the time, without the need to click on it (the field is pre-filled with values).
Here is the relevant code:
HTML:
<input type="text" value="1234567890" id="customersNumber" data-type="phone">
JQuery JS:
$(document).on('focus', 'input[data-type="phone"]', function() {
$(this).mask("(999) 999-9999");
});
Thank you.

Element added to DOM but doesn't display on screen

Basically my problem is that when i add an element from the javascript (using jquery) the element that i added shows up in the web inspector but doesn't display in the browser at all.
What i am trying to do is simulate something i liked about google+ when it first came out, which is when you want to the user to enter a list of item, you provide them with one text field and once they start to add something to that text field then instantly after the first character is typed a new text field with appear under that. So I'm my code, i have the user entering a series of goals they want to achieve, i provide them with a single text field (or multiple if the user is editing the list they previously made) and once the last text field has data then it will programmatically create a new text field.
HTML:
<div class="field-group clickToAddGroup">
<label>Goals: </label>
<div class="input">
<input type="text" name="goals" value="Goal1">
<input type="text" name="goals" value="Goal2">
<input type="text" name="goals" value="Goal3">
<input type="text" name="goals" value="Goal4">
<input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
</div>
</div>
Javascript:
$(".clickToAdd").live('keyup',function(){
console.log("key up triggered");
if( $(this).val() != '' )
{
console.log("cloning in process");
var theClone = $(this).clone().val(''); // Set the new element to null
theClone.appendTo( $(this).parent() ); // Clone Parent
$(this).removeClass('clickToAdd'); // Remove the click to add class
console.log("clone complete");
}
console.log("key up finished");
console.log("----");
});
$('.clickToAddGroup input').live('blur', function(){
if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
$(this).remove();
});
Now the code above actually works, however when the page first loads when i click (or tab to) the last text field (one that has the clickToAdd class) and begin typing, i see in the web inspector that the javascript ran correctly and created the new field and placed it where it should, but i don't actually see it on the screen. But when i take the content that i had just wrote in the text field, delete it, and lose focus (triggering 'blur') the text field is deleted and then i can see the textfield that was shown. From this point on when i add content to the last field (one with the clickToAdd class) it works 100% perfectly, it adds the element and is visible via both the web inspector AND is displayed on screen.
Edit: I copied the code to jsfiddle (included css i am using as well) and tried it there and it happens to work perfectly as intended without the issue i am having. http://jsfiddle.net/qz2QK/2/
Edit 2: Added "var" to the line "var theClone = $(this).clone().val('');" so that its not implicitly a global variable.

Categories