I have this Search form on my website. I dont want to incorporate a search engine, but instead (since content doesnt change that often) i just want the Search box to suggest links on my website matching the input.
I am thinking of providing keywords and their links
"apple" -> http://website.com/fruits.html
"banana" -> http://website.com/fruits.html
"strawberry" -> http://website.com/fruits.html
Kind of like an autocomplete but with suggestions pointing to the same link.
So a dropdown list doesnt work in this case. I have tried datatables and other solutions mentioned in this post (https://stackoverflow.com/questions/36712967/single-dropdown-with-search-box-in-it)
<form action="#" class="header__search">
<input type="text" placeholder="Search">
<button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Z"/></svg></button>
<button type="button" class="close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.41,12l6.3-6.29a1,1,0,1,0-1.42-1.42L12,10.59,5.71,4.29A1,1,0,0,0,4.29,5.71L10.59,12l-6.3,6.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l6.29,6.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg></button>
</form>
Does someone know how to do this?
var options = {
data: [{
"key": "Apple",
"url": "http://website.com/fruits.html"
},
{
"key": "Grapes",
"url": "http://website.com/fruits.html"
},
{
"key": "Strawberry",
"url": "http://website.com/fruits.html"
},
{
"key": "Dog",
"url": "http://website.com/animals.html"
},
],
getValue: "key",
template: {
type: "description",
fields: {
description: "url"
}
},
list: {
match: {
enabled: true
}
},
theme: "plate-dark"
};
$(function() {
$("#example-mail").easyAutocomplete(options);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" integrity="sha512-TsNN9S3X3jnaUdLd+JpyR5yVSBvW9M6ruKKqJl5XiBpuzzyIMcBavigTAHaH50MJudhv5XIkXMOwBL7TbhXThQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" integrity="sha512-5EKwOr+n8VmXDYfE/EObmrG9jmYBj/c1ZRCDaWvHMkv6qIsE60srmshD8tHpr9C7Qo4nXyA0ki22SqtLyc4PRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" integrity="sha512-Z/2pIbAzFuLlc7WIt/xifag7As7GuTqoBbLsVTgut69QynAIOclmweT6o7pkxVoGGfLcmPJKn/lnxyMNKBAKgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input id="example-mail" />
It seems that autocomplete plugins will be satisfied for you.
There're many autocomplet plugins.
First of all, I'll recommend to use http://easyautocomplete.com,
(useful examples are there for you.)
Also, jquery ui autocomplet plugin https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm
I'd put your elements into an object then use find to check if there's a match when then input changes
let search = document.getElementById('search');
let result = document.getElementById('result');
let results = [{
"name": "apple",
"url": "http://website.com/fruits.html"
},
{
"name": "banana",
"url": "http://website.com/fruits.html"
},
{
"name": "strawberry",
"url": "http://website.com/fruits.html"
}
]
search.addEventListener('input', (e) => {
let query = e.target.value;
if (query.length < 2) { // set a minimum number of characters
result.innerText = '';
return;
}
let found = results.find(item => item.name.includes(query));
if (found) {
result.innerText = `${found.name}: ${found.url}`;
}
console.log(found)
})
<form action="#" class="header__search">
<input type="text" placeholder="Search" id="search">
</form>
<br />
<span id="result"></span>
this method will be helpful if files/keywords/suggestion are in low number
use Jquery Autocomplete, every time someone upload a page e.g apple.html you will have insert its link/name to the database and for existing pages link/name should be added to database, later page work like below example and
<!----html code --- add jquery UI cdn in head --- >
<div class="ui-widget">
<label for="tags">Search: </label>
<input id="tags">
</div>
<!------------------------------------------------>
<script>
$(function() {
var availableTags = [
"apple.html",
"samsung.html",
"hp.html",
/*at this part name of file can be printed from database using php + ajax can be helpful but you need to setup it right*/
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
Related
I created a project and I'm trying to add gogocartoJs in it.
The project works but the map is not showing.
I tried with the guides I found in the site, it looks plain and easy, but there is an step that I'm not understanding (please dont just copy/paste a piece of the site like it was obvious what it is the mistake, because it is not for me)
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://gogocarto.fr/assets/css/gogocarto.min.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="./jquery.js"></script>
<script src="https://gogocarto.fr/js/gogocarto.min.js"></script>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
<div id="gogocarto"></div>
</div>
<script>
$(document).ready(function() {
carto = goGoCarto("#gogocarto", {
data: {
taxonomy: taxonomy,
elements: elements
}
});
});
</script>
<script src="./bundle.js"></script>
</body>
</html>
I expect the map to show, and it doesnt
I added the project to github to show better
https://github.com/Aredros/testGogo/tree/master/dist
elements & taxonomy are js variables containing data you must provide according to the format described in the documentation.
// taxonomy
let taxonomy = {
"options":[
{
"id": "eu1",
"name":"Belgium",
"color":"#9acd32",
"icon":"fa-solid fa-building"
},
{
"id": "eu2",
"name": "Netherland",
"color": "#ffa500",
"icon": "fa-solid fa-fan"
},
{
"id": "eu3",
"name": "Luxembourg",
"color": "#a52a2a",
"icon": "fa-solid fa-money-bill-1"
}
]
}
The only missing info in the documentation is the id key in the taxonomy which must be referenced in your elements source dataset.
// elements
let elements = [
{
"title": "Brussels",
"geo": {
"latitude":50.84,
"longitude":4.34
},
"taxonomy": [ "eu1" ],
},
{
"title": "Namur",
"geo": {
"latitude":50.45,
"longitude":4.88
},
"taxonomy": [ "eu1" ],
},
{
"title": "Liege",
"geo": {
"latitude":50.62,
"longitude":5.60
},
"taxonomy": [ "eu1" ],
},
{
"title": "Rotterdam",
"geo": {
"latitude":51.88,
"longitude":4.51
},
"taxonomy": [ "eu2" ],
},
{
"title": "Amsterdam",
"geo": {
"latitude":52.07,
"longitude":5.12
},
"taxonomy": [ "eu2" ],
},
]
Idealy you should build an API returning taxonomy classification & elements data. Then perform ajax call in your html page.
$.ajax({
type: 'GET',
url: '/ajax/url_to_get_elements',
dataType: 'json',
success: function(elements, status) {
build_map(elements);
}
});
// build map = function with 1 arguments (elements) where you put the call to goGoCarto and options...
You can define more than 1 taxonomy group (Example above is about English countries) with the name you want => Cfr. Advanced Taxonomy with Categories. Your elements can then have multiple taxonomy reference listed [ "eu1", "week22", 14 ]. Items in the list can be Integer or String. The only important thing is the ID key and the taxonomy order! Keep the same order in your taxonomy than in your key "taxonomy": in your elements data sources!
Point of attention
Because the library is highly configurable with options, colors and icons it is important to put all your <scripts> tags inside <head> tags of your html page!
I'm having difficultly getting a Semantic UI (v2.4.2) dropdown to work as expected.
If I click the down arrow, the dropdown displays a list of undefined items:
If I type the name of a tag, the dropdown displays the correct list of tags:
HTML:
<div id="myList" class="ui multiple search selection dropdown">
<input type="hidden" name="tags">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
</div>
<script type="text/javascript">
$("#myList").dropdown({
minCharacters : 3,
allowAdditons : true,
apiSettings : {
url : '//localhost:9393/tags/search?q={query}',
onResponse: function(tags) {
console.debug('onResponse');
var response = {
success: true,
results: []
};
$.each(tags, function(index, item) {
response.results.push({
name: item.name,
value: item.id
});
});
return response;
}
}
});
</script>
The JSON API returns a list of tags as an array:
[
{
"id": 5,
"name": "mssql",
"description": "Microsoft SQL Server is a relational, database-management system developed by [Microsoft](https://www.microsoft.com/)."
},
{
"id": 6,
"name": "oracle",
"description": "Oracle's DBMS"
},
{
"id": 8,
"name": "plsql",
"description": "[PL/SQL](https://en.wikipedia.org/wiki/PL/SQL) is Oracle Corporation's procedural extension for SQL and the Oracle relational database."
}
]
Oddly, the onResponse callback only fires when a value is typed in the search box.
What am I missing?
you've set the minimum number of characters to initiate the search to 3 right here:
$("#myList").dropdown({
minCharacters : 3,
allowAdditons : true
simply add:
showOnFocus:true
to your configuration object. It should solve the problem.
I've been trying to slightly modify the observables example found in the docs. Instead of having different enums according to user's choice in the radio button, I want the field below to change the title.
Here's a running fiddle for that.
And the following the code snippet so far:
var teams = {
"None": "None",
"Milwaukee": "Milwaukee",
"Cleveland": "Cleveland",
"Boston": "Boston"
};
$("#form1").alpaca({
"schema": {
"type": "object",
"properties": {
"city": {
"title": "Pick a City",
"type": "string",
"enum": ["Milwaukee", "Cleveland", "Boston"]
},
"team": {
"title": "nothing yet",
"type": "string",
}
}
},
"postRender": function(control) {
var city = control.childrenByPropertyId["city"];
var team = control.childrenByPropertyId["team"];
team.subscribe(city, function(val) {
//city.schema.title = teams[project.data];
console.log('updating field title');
this.schema.title = teams[val];
//this.parent.refresh();
this.refresh();
console.log('refreshed')
});
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
<link href="https://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet"/>
<div id="form1"></div>
In order to change the label of your field you should use options not schema.
this.options.label = teams[val];
Tell me if this isn't working for you.
I have been studying and working endlessly with DataTables the past 2 weeks and gotten to a brick wall now. The issue I am trying to sort out is how I can pass values in a particular row when the button for that row is clicked on. As at now with my limited knowledge on DataTables and JQuery, when I have like 2 to 3 buttons in different rows and I click on each one, the value they all return back is the values in the first row only. Not sure how best I can solve this or where my error might lie. Any guide or help would be much appreciated. Thanks
<script type="text/javascript" charset="utf-8">
<!-- ------------------- Extract all Alerts ---------------------- -->
$(document).ready(function (){
var alertTable = $('#alert-table').DataTable({
"jQueryUI": true,
"columns": [
{ "data": "source", "visible": false },
{ "data": "host" },
{ "data": "description" },
{ "data": "priority" },
{ "data": "acknowledged", render: function( data, type, row ) {
if (data == "0" && row.priority > "2") {return '<div><form method="post" id="'+row.source + row.eventid+'" action="include/db_conn.php"> <input type="hidden" id="evtid" value ="'+row.eventid+'"> <input type="hidden" name="source" value ="'+row.source+'"> <INPUT TYPE="text" name="username" size="3" maxlength="3"> <input type="submit" name="'+row.source + row.eventid+'" onClick="ackbutton(this)" value="Ack Alert"></form></div>';
} return data;
}
}
],
});
setInterval (function(){
$.getJSON("data/json_data.txt", function (pcheckdata){
alertTable.clear().draw();
alertTable.rows.add(pcheckdata.alert).draw();
alertTable.columns.adjust().draw();
});
}, 10000);
});
function ackbutton() {
//e.preventDefault();
var $this = $(this);
var getvalues = $('#evtid').val();
alert(getvalues);
}
</script>
HTML:
<body>
<div class="all_tables">
<table id="alert-table" class="display" cellspacing="0">
<thead class="t-headers">
<tr>
<th>Server</th>
<th>Host</th>
<th>Description</th>
<th>Priority</th>
<th>Acknowledged</th>
<th>Eventid</th>
</tr>
</thead>
</table>
</div>
</body>
JSON
{
"alert": [
{
"source": "Server1",
"host": "host1",
"description": "Engine Alive",
"priority": "4",
"triggerid": "14531",
"acknowledged": "0",
"eventid": "3419709",
"value": "1"
},
{
"source": "Server2",
"host": "host2",
"description": "webapp down",
"priority": "2",
"triggerid": "18027",
"acknowledged": "1",
"eventid": "4012210",
"value": "1"
}
],
"error": []
}
You need to find the input with id 'evtid' in closest div of currently clicked ack button.
Example:
$(document).on('click','.submitButton',function(e){
e.preventDefault();
debugger
var $this = $(this);
var curEventId = $this.closest('div').find('#evtid');
var getvalues = curEventId.val();
alert(getvalues);
return false;
});
You can also use closest form instead of div.
var curEventId = $this.closest('form').find('#evtid');
Here is the Live Example what I currently have now : https://dl.dropboxusercontent.com/u/11126587/input%20Tag%20Creation/tag.html
What I am wanting is that if I click on the "+ Add Another Segment" text it will Create same input box with same tag effect Like what currently have now(You can write Something and press the Enter To See the Tag Effect) .
HTML
<html>
<head>
<meta charset="utf-8">
<title>
Input Tag
</title>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>
<script type="text/javascript">
$(function() {
// Empty List
$( '#empty-list input.tag' ).tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Edit only
$( '#brackets input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Arrow List
$( '#arrow input.tag' ).tagedit({
autocompleteURL: 'server/autocomplete.php',
autocompleteOptions: {minLength: 0}
});
// Custom Break Characters
$('#custom-break input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php',
// return, comma, space, period, semicolon
breakKeyCodes: [ 13, 44, 32, 46, 59 ]
});
// Local Source
var localJSON = [
{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
{ "id": "2", "label": "Common Quail", "value": "Common Quail" },
{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" }
];
$('#local-source input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
$('#local-source2 input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
$('#local-source3 input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
// Function Source
$('#function-source input.tag').tagedit({
autocompleteOptions: {
source: function(request, response){
var data = [
{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
{ "id": "2", "label": "Common Quail", "value": "Common Quail" },
{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" },
{ "id": "4", "label": "Merlin", "value": "Merlin" },
];
return response($.ui.autocomplete.filter(data, request.term) );
}
}
});
});
</script>
</head>
<body>
<p id="local-source" style="padding:0px; margin:0px;">
<input type="text" name="tag[]" value="" class="tag"/>
</p>
+ Add Another Segment
I found this tag Effect from a someones Blog But I wanted to extend this with Click to Create New Segment . Also I am not used to with js Fiddle So I gave example link from my Drop Box .
If Someone can make this it would be great . If my posting format have anything Wrong please let me know if I Can help you with posting or giving more Information .
Thanks in advance
Something like this??
<p id="local-source">
<input type="text" class="tag"/>
</p>
<div id="add">
+ Add Another Segment
</div>
$(document).ready(function() {
$('#add').on('click', function() {
var input = '<input type="text" class="tag"/>';
$(input).appendTo($('#local-source'));
});
});