We Keep Coding

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 refresh an Input field after changing its value with JQuery?

I have an Input element in HTML (and a Javascript template) with empty Value. Throught AJAX and JQuery, I update the said value to a list of words split by comma. Each word should become green retangulars with an 'X' to remove it from the field. The same list of words works perfectly when I write it down in the code.
The problem is that when I put this very same string in the Value attrib. using JQuery, it just doesn't work properly. I just get plain text, and those fancy green retangulars only appear when I click inside the input field and hit TAB key. Then They become one item only and when I finally click to remove it, then they got split(!).
I have already tried using fadeOut() and fadeIn() and refresh method. Did not work.
Any ideas about this?
HTML:
<input id="tags_1" type="text" class="tags form-control" value="" />
AJAX/JQUERY:
var tags_x = tags_x.replace(/\,/g, ', ');
var tags_x = tags_x.split(',');
$('#tags_1').val(tags_x);
$('#tags_1').attr('value', tags_x);
$('#tags_1').fadeOut();
$('#tags_1').fadeIn();

Your id of the input is tags_1 but you are selecting it like #tags_1_tag. Why is that? I think maybe that could be the reason.
And by the way when you use var tags_x = tags_x.split(','); tags_x is an array now. If you want to put it in a value convert it to a string and then try to put it in the value attr. You can see an example below:
var new_x = tags_x.join('')
$('#tags_1_tag').val(new_x);

Single jQuery Image Selector for Multiple Fields

I'm trying to figure out the approach to this problem, if someone can't provide a direct solution, I would benefit from a conceptual approach so I can try to solve it myself.
I have a page with text form fields, each field having a corresponding IconId. On the page will be list of small image icons (PNG). Goal is when a user clicks on one of the text boxes, it will activate the 100 icons, user can select 1 icon which will add the IconId to the corresponding hidden field. When a user clicks on a field that already has a IconId assigned or in the hidden field, they can choose a different icon and that swaps out the IconId. Page will be submitted as a standard form post via PHP and page framework will be Bootstrap 3 w/ jQuery 1.11.
Here is a Fiddle demonstrating the use case: http://jsfiddle.net/pitashi/xpvt214o/182828/

Here is a simple example of using a data attribute,..
I've not actually used icons here, or a hidden field for demo purposes, but it should be easy for you to alter for your needs.
var lastFocus = null;
$(document.body).on("focus", "input", function () {
lastFocus = this;
});
$(document.body).on("click", "[data-icon-id]", function () {
$(lastFocus).val(this.dataset.iconId).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click each LI, and you will get the id inside the last focused input field.</p>
<input /><br>
<input /><br>
<input /><br>
<ul>
<li data-icon-id="1">Icon 1</li>
<li data-icon-id="2">Another icon (2)</li>
<li data-icon-id="3">It's three</li>
</ul>

You could add an unique id to each input field (e.g. iterating them input-1, input-2 etc.). Then, you could store the id of the currently selected input field into a variable of your script.
When clicking an icon, you select the input field by that saved variable/id and update its corresponding icon-id hidden field.

how to copy a text of span

I copy need the dynamic text of a spam that is generated by a slider that the user sets. It must be copied to a value of an input.
I tried that, and didnt work:
<h4>Valor do consórcio: <span class="slider-value quote-form-element valor-carro1" data-name="Valor | Automóvel" name="Valor" data-slider-id="consorcio-auto">R$ <span id="THAT_VALUE"></span></span>
</h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="hidden" id="THAT_FIELD" name="THAT_FIELD" value="" />
<h4>Seus dados:</h4>
<input type="hidden" id="valorcarro" name="valorcarro" value="" />
script
$(function(){
var valorcarro = $('#THAT_VALUE').html();
$('#THAT_FIELD').val(valorcarro);
});
example in this page in the button on menu "Simulação".
The script just does not copy because the value is generated later and the user can still change

You need to use an event to fire your code after the slider value has changed. This is how you do it with a bootstrap slider.
$('.slider').on('slideStop', function () {
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});

To get the text of an element, use text()
For example
$("span").text();

you can try this code.
jQuery(function(){
var valorcarro = jQuery('#THAT_VALUE').text();
jQuery('#THAT_FIELD').val(valorcarro);
});

Actually, #Pamblam's response is better than mine. I was assuming the .slider class was for regular range inputs, which fire the 'change' event when their value changes, but it looks like it is in fact a bootstrap slider, which fires the slideStop event instead. Regardless, the code here listens for a change in the slider value, and when it is triggered, takes the text from the #THAT_VALUE span (from op's code) and sets the value of the #THAT_FIELD field to whatever it is :
$(".slider").change(function(){
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});

Typeahead input element styling

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);
}
});