I'm trying to create a message system and so far it's almost done, just the Send message needs a small edit. I have created a live search for the receiver and it's working, everything is showing but I want to make an on click function to append the name of the receiver into the input.
Or is there any way to change the placeholder while typing the username ?
This is the autocomplete script:
$(document).ready(function(){
$('#to input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("engine/includes/message_to_autocomplete.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
$(document).on("click", ".result p", function(){
$(this).parents("#to").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
And it returns: $row['username'] as shown onto the image.
Seems like you're trying to reinvent the wheel. Since you are already using jquery, you can try autocomplete.
$(function() {
var names = ["Austin", "Bryson", "Claudia", "David", "Eve", "Fabio", "Garry", "Helen"];
$("#to").autocomplete({ source: names });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="to" type="text" placeholder="Name"/>
As for changing the placeholder, there is a library called typeahead and you can find plenty of demos here
Related
My project:
I'm doing the bookmark section in the Yandex Browser.
Image of my project:
I want to reset the two entered values when I click the button. (I don't want to do that with the reset button. I don't want to use the form label.)
My codes:
$("#add").click(function(){
$("#siteName").val(" ");
$("#siteURL").val(" ");
});
Although he works here, he doesn't work in my project.
Since the codes are too long, I uploaded them here. Click to reach.
You are calling the addBookmark function on click, you can reset the values there.
function addBookmark(){
// set variables
var siteName = document.getElementById("siteName").value;
var siteURL = document.getElementById("siteURL").value;
document.getElementById("siteName").value = '';
document.getElementById("siteURL").value = '';
(EDIT)
or with JQuery
function addBookmark(){
// set variables
var siteName = document.getElementById("siteName").value;
var siteURL = document.getElementById("siteURL").value;
$("#siteName").val('');
$("#siteURL").val('');
Then you need import jquery to your project.
<input id="siteName" name="siteName"><input id="siteURL" name="siteURL"><button id="add">Click Me</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<script type="application/javascript">
$("#add").click(function(){
$("#siteName").val("");
$("#siteURL").val("");
});
</script>
I need to get data from Materialize CSS chips, but I don't know, how.
$('.chips-placeholder').material_chip({
placeholder: 'Stanici přidíte stisknutím klávesy enter',
secondaryPlaceholder: '+Přidat',
});
function Show(){
var data = $('.chips-placeholder').material_chip('data');
document.write(data);
}
<!-- Added external styles and scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- HTML body -->
<div class="chips chips-placeholder"></div>
<button onclick="Show()" type="button">Show</button>
So, to access to the data's chip you just have to do this:
var data = $('#id of your chips div').material_chip('data');
alert(data[0].tag);`
'0' is the index of your data (0, 1, 2 , 3, ...).
'tag' is the chip content. You can also get the id of your data with '.id'.
To get data from Materialize CSS chips, use the below code.
$('#button').click(function(){
alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});
They appear to have changed the method available in the latest version.
The documentation suggests that you should be able to access the values as properties of the object, but I’ve spent an hour looking, not getting anywhere.
Until the following happened
$('.chips-placeholder').chips({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
onChipAdd: (event, chip) => {
console.log(event[0].M_Chips.chipsData);
},
During the onChipAdd event I was able to access the event. Within this object was an array of tags.
I know this isn't the documented way, however there is only so much time a client will accept when it comes billing and I must move on.
This worked great for me
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.chips');
var instances = M.Chips.init(elems, {
placeholder: "Ajouter des Tags",
secondaryPlaceholder: "+tag",
onChipAdd: chips2Input,
onChipDelete: chips2Input,
Limit: 10,
minLength: 1
});
function chips2Input(){
var instance = M.Chips.getInstance(document.getElementById('chip1')), inpt = document.getElementById('myInputField');
inpt.value = null;
for(var i=0; i<instance.chipsData.length; i++){
if(inpt.value == null)
inpt.value = instance.chipsData[i].tag;
else{
inpt.value += ','+instance.chipsData[i].tag; //csv
}
}
console.log('new value: ', inpt.value);
}
});
</script>
Hoi folks, i am not confirm to js. My Problem ist if i define an array for autocomplete in the code it works, if i use an json-array( also from an external source) it dosent. What am i doing wrong ?
jsonData='{"kantone":["VD","FR","GE"]}
var alternate=["TG","ZG","ZH"];
window.availableKanton = JSON.parse(jsonData);
$(function() {
$( "#startkanton" ).autocomplete({
source: window.availableKanton.kantone // dont work if i take the alternate it does
});
});
I pasted your code into the snippet below, and it's working.
The only thing I had to do was to close the string (by putting a ') into the first line.
var jsonData = '{"kantone":["VD","FR","GE"]}';
var alternate = ["TG", "ZG", "ZH"];
window.availableKanton = JSON.parse(jsonData);
$(function() {
$("#startkanton").autocomplete({
source: window.availableKanton.kantone // working
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="startkanton">
I have 2 textfield with different ids. what I want to achieve is that when I write to textfield1 that content is immediately copied to the second one and if I edit the second one the first one remains unchanged, but also if I go back to first one and edit it, the content is just appended to the second one.
<input type="text" name="field1" id="f1" />
<input type="text" name="field2" id="f2" />
Code :
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
$('#f2').val($('#f1').val());
});
});
</script>
Try this,
$(document).ready(function () {
$("#f1").keypress(function (e) {
var val = $('#f2').val();
var code = e.which || e.keyCode;
$('#f2').val(val+(String.fromCharCode(code)));
});
});
Live Demo
you can write like this
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
var f2Text = $('#f2').val() + $(this).val();
$('#f2').val(f2Text );
});
});
</script>
you can also use the Angular JS which is more efficient and easy to use.
AngularJS
Angular JS will help you to develop SPA(Single Page Application).
I am trying to set up a donations page for people to give money to a non-profit and allow them to specify the uses of the money. I have it set up that it totals the amounts the giver puts in each field as they enter amounts. I am trying to add an input mask in each field, but it is just making my JavaScript crash and not do anything. Here is the code I currently have that works perfectly before any masks:
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
});
</script>
'toTotal' is the class name given to all the input boxes that need to be added up; that is also the class that needs a mask. 'giveTotal' is the id of the total field.
I have tried several variations I have found on StackOverflow and other sites.
Full Code:
<html>
<head>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
//This is one of the masking codes I attempted.
$('.toTotal').mask('9.99', {reverse: true});
//other options I have tried:
//$('.toTotal').mask('9.99');
//$('.toTotal').mask('0.00');
//$('.toTotal').inputmask('9.99');
//$('.toTotal').inputmask('mask', {'mask': '9.99'});
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
//I have tried putting it here, too
});
</script>
<title>Addition</title>
</head>
<body>
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" id="giveTotal">
</body>
</html>
There is no masking library script referenced in the sample code. You need to download the Digital Bush Masked Input Plugin Script and copy it into your JS folder.
Then add following script reference after 'jquery.js' line:
<script src="/js/jquery.maskedinput.min.js"></script>