I would like to use the EasyAutcomplete plugin to create an autocomplete list for the user and then to send the value associated to the matching string by GET method ... and not the matching string.
Using this code
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.min.css">
<link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.themes.min.css">
<script src="./EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>
</head>
<body>
<form method="get" action="test.php">
<input id="provider-file" name="get_value"/>
<script>
$(document).ready(function() {
var options = {
url: "./EasyAutocomplete/file.json",
getValue: "name",
list: {
match: {
enabled: true
}
}
};
$("#provider-file").easyAutocomplete(options);
});
</script>
<div>
<input type="submit" value="send"/>
</div>
</form>
</body>
</html>
and the JSON file having the following format
[
{"name":"Bob","id":"1"},
{"name":"David","id":"2"},
{"name":"Steve","id":"3"},
...
]
the user get redirected to 'test.php?get_value=Bob' after submitting Bob, while I would like him to be redirected to 'test.php?get_value=1' (i.e. to send "id" and not "name").
Could anyone help me? I couldn't find any answer in the EasyAutocomplete doc.
You can use the onSelectItemEvent event along with the getSelectedItemData method to populate a hidden input field named get_value with the ID you want to submit and remove the name from the lookup input field so that it won't get submitted.
HTML:
<input id="provider-file">
<input type="hidden" id="id-value" name="get_value">
Setup:
var options = {
url: "./EasyAutocomplete/file.json",
getValue: "name",
list: {
onSelectItemEvent: function() {
var value = $("#provider-file").getSelectedItemData().id; //get the id associated with the selected value
$("#id-value").val(value).trigger("change"); //copy it to the hidden field
}
}
};
Demo (click submit to see that get_value=id is submitted):
$(document).ready(function() {
var options = {
data: [{
"name": "Bob",
"id": "1"
}, {
"name": "David",
"id": "2"
}, {
"name": "Steve",
"id": "3"
}],
getValue: "name",
list: {
onSelectItemEvent: function() {
var value = $("#provider-file").getSelectedItemData().id; //get the id associated with the selected value
$("#id-value").val(value).trigger("change"); //copy it to the hidden field
}
}
};
$("#provider-file").easyAutocomplete(options);
// used to validate what gets submitted
$("#form-test").on('submit', function(e) {
e.preventDefault();
console.log($(this).serialize());
});
});
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<form method="get" id="form-test">
<input id="provider-file">
<input type="hidden" id="id-value" name="get_value">
<input type="submit">
</form>
Related
I would like to show two tags with the same text written in the slect2 search input field. I managed to do that but when the user select one of the two tags then the selection is not shown into the select2 input.
here the issue:
https://jsfiddle.net/zgu3y6ro/5/
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div>
<select id="test" class="form-control" multiple="multiple"></select>
</div>
$("#test").select2({
tags: true,
tokenSeparators: [',', ' '],
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return [
{
id: "test1_"+term,
text: "test1_"+term,
newTag: "R"
},
{
id: "test2_"+term,
text: "test2_"+term,
newTag: "W"
},
]
},
insertTag: function (data, tag) {
data.push(tag[0]);
data.push(tag[1]);
}
});
Anyone can help me? Thank you.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
I want to return the results of the users’ search in HTML. The results will vary depending on what value they type in. How can I get my code to display the data from whatever the value of {NameOfData} is?
Myscript.js
function GetData(e){
const nameOfData = e.target.value;
const url = `http://container:8004/v1/data/${nameOfData}`;
//http request
fetch(url,)
.then(res => res.json())
.then (json => console.log(JSON.stringify(json)))
const input = document.getElementById("input");
input.addEventListener("change", GetData);
Index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form id="form" role="search">
<input type="search" id="input" name="q" placeholder="Search Entities...">
<button>Search</button>
</form>
<script src="myScript.js">
</script>
</body>
</html>
There are only two options for them to input/search for: site and country.
This is what the returned value will look like if {NameOfData} is site:
[
{
"id": "4833e18248616a04ee29b4dd08dd68abfa049ad720489677533c8507a95e7335",
"url": "http://container:8004/v1/data/site/4833e18248616a04ee29b4dd08dd68abfa049ad720489677533c8507a95e7335",
"type": "site",
"name": "Head-Smashed-In Buffalo Jump",
"legal": [
{
"type": "attribution",
"text": "Data is supplied by Wikipedia",
"link": "https://en.wikipedia.org/"
}
]
},
This is what the returned value will look like if the {NameOfData} is Country:
[
{
"id": "5c02434187bc31589f270ae33efb56cbcc43ac0ffcc80d03b42990a0eb61a168",
"url":http://container:8004/v1/data/country/5c02434187bc31589f270ae33efb56cbcc43ac0ffcc80d03b42990a0eb61a168",
"type": "country",
"name": "Afghanistan",
"legal": [
{
"type": "attribution",
"text": "Data is supplied by Wikipedia",
"link": "https://en.wikipedia.org/"
}
]
},
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<form id="form" role="search">
<input
type="search"
id="input"
name="q"
placeholder="Search Entities..."
/>
<!-- button>Search</button -->
</form>
<div>
<ul style="list-style: none" id="results"></ul>
</div>
<script src="yourScript.js"></script>
</body>
</html>
yourScript.js
const createAndAppendDOM = (DOMChild, objDOMParameters, parent) => {
// argument -> objDOMParameters must be object with parameters of HTML tag -> example { id: 'myId', textContent: 'example' }
const DOMCreated = document.createElement(DOMChild);
if(Object.keys(objDOMParameters).length === 0 ) {
return {
created: false,
error: "Object is empty"
};
}else {
for(let parameter in objDOMParameters) {
DOMCreated[parameter] = objDOMParameters[parameter];
}
}
parent.appendChild(DOMCreated);
}
function GetData(e) {
e.preventDefault();
const nameOfData = e.target.value;
//const url = `http://container:8004/v1/data/${nameOfData}`;
const url = "https://my-json-server.typicode.com/typicode/demo/posts";
//http request
fetch(URL)
.then(res => res.json())
.then(
json => {
//console.log(json);
json.forEach(element => {
createAndAppendDOM('li', { textContent: ` ${element['title']} ` }, results);
});
})
}
// I don't know what for you have button tag and what for if you have listener - change - to input
// its not make sense
// so what do you want to do when you append listener to button - click - for submit?
// If you want to use listener like - change - so you maybe delete button in you HTML code, because your code will execute when you escape from input tag
const results = document.querySelector("ul");
console.log(results);
const input = document.querySelector("input");
input.addEventListener("change", GetData);
The code works perfectly fine for the first 4 variables but after that i am getting an invalid page response which i created for any invalid entry. but since my entry of url of every variable is there, still it not responding. Can anyone help me with this code. I have also made every html page mentioned in the variable url.
// Define routing:
var validValues = [{
value: '425769540588',
url: './something.html'
}, {
value: '264719964726',
url: './stud26471.html'
},
{
value: '327774003000',
url: './stud32777.html'
},
{
value: '345102833684',
url: './stud34510.html'
},
{
value: '359221005742',
url: './stud35922100.html'
},
{
value: '423570687069',
url: './stud42357.html'
},
{
value: '439624197820',
url: './stud43962.html'
},
{
value: '440176316459',
url: './stud44017.html'
},
{
value: '681042208435',
url: './stud68104.html'
},
{
value: '729172701174',
url: './stud72917.html'
},
{
value: '898871777413',
url: './stud89887.html'
},
{
value: '913625248899',
url: './stud91362.html'
}
];
var $myInput = $('#my-input');
$('#my-button').click(function(ev) {
ev.preventDefault(); // Prevent submitting the form already
// Look for a valid value
var url = './invalid.html';
$.each(validValues, function(i, validValue) {
if ($myInput.val() === validValue.value) {
url = validValue.url;
return false;
}
});
// Submit the form
$('#my-form').prop('action', url).submit();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title></title>
</head>
<body>
<h1 id="title">Hello</h1>
<form class="form-inline" id="my-form">
<div class="form-group">
<input type="text" id="my-input">
<button type="submit" id="my-button">Go</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
{
value: '359221005742',
url: './stud35922100.html'
}
I would point out that the fourth one (which I have pasted here) breaks your URL convention, which includes only the first 5 digits of the value. Should it possibly be ./stud35922.html instead?
I'm trying to have a kendo multiselect filled with some initial values which can't be removed later by the user.
I've tried to run through the DataBond event of multiselect widget and get each of the elements, but I couldn't accomplish what I'm trying.
Maybe (or more probably) I'm doing something wrong.
Also, I've seen this to disable elements:
<span class="#: unselectableItem ? 'k-state-disabled': ''#">
#: text #
</span>
But i'm not sure, how to implement it.
What I have so far:
#(Html.Kendo().MultiSelect().Name("msEquipoResponsable")
.DataValueField("Id").DataTextField("Tipo")
.DataSource(ds => ds.Read(r => r.Action("ObtenerPersonal","AuditoriaPlaneacionMemorandoEditor")))
.Value(Model.EquipoResponsable.Split(','))
.Events(ev => ev.DataBound("onBindingMS"))
)
DataBound function:
function onBindingMS(event)
{
var dataItems = event.sender._dataItems;
$.each(dataItems, (ind, el) => {
//Disabled logic should be here i guess...
});
}
Try preventing the deselect event to be completed using e.preventDefault() for those items which cannot be deselected.
deselect: function(e) {
if (e.dataItem.unselectableItem)
{
// Call preventDefault() to prevent the deselection
e.preventDefault();
}
}
In the snippet below, items Item1 and Item3 starts selected and cannot be deselected according to the unselectableItem property:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head>
<body>
</body>
<select id="multiselect" multiple="multiple">
<option selected>Item1</option>
<option>Item2</option>
</select>
<script id="item-template" type="text/x-kendo-template">
<span class="#: unselectableItem ? 'k-state-disabled': ''#">
#: text #
</span>
</script>
<script>
$("#multiselect").kendoMultiSelect({
dataSource: [{
id: 1,
text: "Item1",
unselectableItem: true
},{
id: 2,
text: "Item2",
unselectableItem: false
},{
id: 3,
text: "Item3",
unselectableItem: true
},{
id: 4,
text: "Item4",
unselectableItem: false
}],
dataValueField: "id",
itemTemplate: $("#item-template").html(),
tagTemplate: $("#item-template").html(),
deselect: function(e) {
if (e.dataItem.unselectableItem)
{
// Call preventDefault() to prevent the deselection
e.preventDefault();
}
},
value: [1,3]
});
</script>
</html>
Demo
I have a JSON element with a bunch of different zip codes associated with "zones." What I would like to do is allow a user to submit their zip code, check if the zip code exists within the JSON element and then report which "zone" it belongs to if it does:
var zones = [{
"zone": "one",
"zipcodes": ["69122", "69125", "69128", "69129"]
},
{
"zone": "two",
"zipcodes": ["67515", "67516", "67518", "67521"]
}
];
$(function() {
$('#userZip').submit(function(e) {
e.preventDefault();
var userZip = $('input[type="text"]').val();
// Check if zip exists in JSON and report which zone it belongs to
});
});
i {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userZip">
<i>Enter zip code "69122" as an example</i>
<input type="text" placeholder="zip" />
<input type="submit" />
</form>
You can use Array.find
var zones = [
{
"zone": "one",
"zipcodes": ["69122", "69125", "69128","69129"]
},
{
"zone": "two",
"zipcodes": ["67515", "67516", "67518", "67521"]
}
];
$(function() {
$('#userZip').submit(function(e) {
e.preventDefault();
var userZip = $('input[type="text"]').val();
// find the first zone with the userZip inside its zipcodes list
var zone = zones.find(function(zone) {
return zone.zipcodes.indexOf(userZip) > -1;
});
alert("Zone: " + zone.zone);
});
});
i {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userZip">
<i>Enter zip code "69122" as an example</i>
<input type="text" placeholder="zip" />
<input type="submit" />
</form>