I want to make an e-mail input box with an auto suggestion dropdown. I downloaded the Select2 Plugin from github & installed the .js and .css files following the plugin instruction.
I don't understand the markup for the input box and how the input box picks data to show as suggestions. Can any one help me please?
Just like any other jquery plugin, select2 plugin also adds its feature to the jquery object. So you obtain a reference of the DOM element using $() and then call select2() on it, it converts the simple dorpdown element into a autocomplete dropdown like:
<html>
<head>
<script>
$(document).ready(function() {
$("#my-dropdown").select2();
});
</script>
</head>
<body>
<select id="my-dropdown">
<option id="1">Dogs</option>
<option id="2">Cats</option>
<option id="3">Wolves</option>
<option id="4">Rhinos</option>
</select>
</body>
Since you need to use it for email input box. I suppose that the input box is for email ids. So what you can do is, keep the list of email ids in an array of objects. And have a select element with multiple attribute on the page.
Then on page load, just bind the array to the select using select2 plugin as given below:
<html>
<head>
<script>
var list = [{id: "abcd#gmail.com", text: "Foo Bar"},
{id: "jhon.doe#abcd.com", text: "John Doe"},
{}, ....];
$(document).ready(function() {
$("#email-input-box").select2({data: list});
});
</script>
</head>
<body>
<select id="email-input-box" multiple="multiple"></select>
</body>
</html>
Once you decide on what is to be shown to the user, what a user can type like email id or the name to select etc, then you can make changes to the text field of the array.
Related
I'm trying with Selenium IDE and Selenium IDE++ (Kantu) to store the text from an input element with text disabled.
I tried:
StoreValue|id=abc|var1
echo |${var1}|
But I get error [error] timeout reached when looking for element 'id=abc'
Then I've tried with javascript with this code:
document.getElementById("abc").value
And when I tried that JS code in Chrome console it works and prints the text I want, but if I insert this code in either Selenium IDE or in Kantu doesn't work. I do like this:
executeScript|var a = document.getElementById("abc").value; return a;| var1
echo | ${var1}
In this case I get error
Error in executeScript code: Cannot read property 'value' of null
When I inspect with Developer tools in chorme the text I want to get, the code is like this:
<input id="abc" class="form-control input" disabled="disabled">
Below I show an example of this:
function myFunction() {
document.getElementById("abc").disabled = true;
}
<!DOCTYPE html>
<html>
<body>
Name: <input id="abc" class="form-control input">
<p>Click the button to disable the text field.</p>
<button onclick="myFunction()">Disable Text field</button>
</body>
</html>
Thanks for any help.
I have a very simple website that I built using Perl cgi-bin. I have one form field that displays all the application codes in my small company. Since the application list was small, I used a simple drop down list. However, with growing number of applications, the drop down is turning out to be unmanageable. Is it possible to use auto-complete for this field using Perl cgi ?
Edit : The application names are stored in a database table. I pull the application list from the database.
HTML5 has a nifty tag for Autocomplete Dropdown, <datalist>. Below is the usage definition for this tag as found on w3schools.com:
Definition and Usage The <datalist> tag specifies a list of
pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on
elements. Users will see a drop-down list of pre-defined
options as they input data.
Use the <input> element's list attribute to bind it together with a
<datalist> element.
Code Example:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
For more details, refer to this link: http://www.w3schools.com/tags/tag_datalist.asp
Alone Perl-CGI it can't do.
Try to use javascript inside your CGI script. I added the sample html and javascript below
HTML code
<form>
<input type="text" id="someid" onkeyup="myfunc()" style="width:150px"/>
<div id='auto_div' style="position:absolute; width:150px; height:100px;">
</div>
</form>
Javascript with AJAX call
function myfunc()
{
var val = document.getElementById("someid").value;
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res = xmlhttp.responseText;
document.getElementById("auto_div").innerHTML= res;
}
}
xmlhttp.open("GET","database.pl?input_value="+val,true);
xmlhttp.send();
}
Trigger the myfunc function on every keyup (onkeyup()) then get the value of input tag. Then pass the value from the DB connecting perl file using ajax the result of the output will store into the res variable then write the conent into the auto_div
I have a polymer element <my-element> with a computed property myProperty. I need to bind myProperty to another place in the HTML page, so I can't put it inside a dom-bind template
Here's what I mean
<html>
<body>
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</body>
</html>
I cannot wrap my-element and the usage of [[myProperty]] in a dom-bind template as this would result in nearly the entire document being enclosed in this. Attempting to use the bind as it is results in myProperty = [[myProperty]] being displayed, not the value of [[myProperty]].
Is there some way to have behaviour similar to data binding but usable across the whole HTML document? (In the future there might also be a case where [[myProperty]] is used inside an attribute such as <my-second-element my-property="[[myProperty]]">). Or if both occurences are wrapped individually in dom-bind templates is there some way to make the bind global?
Thanks in advance
Not sure why you wouldn't be able to do like this:
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
</head>
<html>
<body>
<template is="dom-bind" id="app">
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</template>
</body>
</html>
This is totally doable. If myProperty changes inside my-element it would also change in "this" html-document. There also wouldn't be a problem adding your second element:
<my-second-element my-property="[[myProperty]]">
Unless you're missing to tell us some specific behavior that you want, this should be what you want. :)
so i'm using nodejs and nodejsdb-mysql. i want to make form for adding and searching posts.
I make html page with form, transform it to node using jsdom but how do i set up variables?
for example my html form is like:
name = text input
surname = text input
submit
and how do i pass inserted name/surname to var??
You will need to turn your submit into a button with an event such as onclick - this might be what you are looking for:
<input type="button" value="Submit" id="submit" name="submit" onclick="submit()">
<script type="text/javascript">
function submit(){
var name = document.getElementById('**name**').value;
var surname = document.getElementById('**surname**').value;
alert("Thanks for submitting, " +name);
}
</script>
With nodejsdb-mysql sooner or later you will face real problems like date localization problems and so on, use https://github.com/felixge/node-mysql instead
I have a requirement in a jsp web app, where a URL is taken as input from end user. This URL comprises of a fixed value (a list of possible url values from database that can't be changed by end user) and a suffix (for url) that can be input by end user.
I want this fixed + suffix value to be populated into a text box in a form on same web page.
How do I do this? Also I want to ensure that the text box in which the final value is populated, is non editable.
Can the above be done using an HTML form? I would appreciate it if you could provide a code sample.
<html>
<head>
<script>
function populateTxtFiled(){
var url = document.getElementById('url');
alert(url.value)
document.getElementById('websiteUrl').value = "htttp://www."+url.value;
document.getElementById('websiteUrl').disabled =true;
}
</script>
</head>
<body>
Select Website:
<select id="url" onchange="populateTxtFiled()">
<option value="0">select website url</option>
<option value="google.com">google</option>
<option value="yahoo.com">yahoo</option>
<option value="youtube.com">youtube</option>
</select>
<br />
<br />
Website Url<input id="websiteUrl" type="text" name="websitUrl"/>