aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorVirtualTam <virtualtam@flibidi.net>2015-11-22 23:22:17 +0100
committerVirtualTam <virtualtam@flibidi.net>2015-11-22 23:22:17 +0100
commit98348200e397864396cfea7db6b9fca698b033e1 (patch)
tree58a7c3ec2086ae988a030cbf8afdc63ed2c97d99
parent456d30532901dd76b8005f067a189eb68d18ac88 (diff)
parentb39b1bc2eeebcb52f37f33f63fa645db014130c3 (diff)
downloadShaarli-98348200e397864396cfea7db6b9fca698b033e1.tar.gz
Shaarli-98348200e397864396cfea7db6b9fca698b033e1.tar.zst
Shaarli-98348200e397864396cfea7db6b9fca698b033e1.zip
Merge pull request #377 from ArthurHoaro/search-tag-autocomplete
Fixes #360 - Auto-complete more than one tag in tag filter field
Diffstat
-rw-r--r--inc/awesomplete-multiple-tags.js35
-rw-r--r--tpl/editlink.html37
-rw-r--r--tpl/linklist.html33
3 files changed, 62 insertions, 43 deletions
diff --git a/inc/awesomplete-multiple-tags.js b/inc/awesomplete-multiple-tags.js
new file mode 100644
index 00000000..e0f889b1
--- /dev/null
+++ b/inc/awesomplete-multiple-tags.js
@@ -0,0 +1,35 @@
1$ = Awesomplete.$;
2awesomplete = new Awesomplete($('input[data-multiple]'), {
3 filter: function(text, input) {
4 return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
5 },
6 replace: function(text) {
7 var before = this.input.value.match(/^.+ \s*|/)[0];
8 this.input.value = before + text + " ";
9 },
10 minChars: 1
11});
12
13/**
14 * Remove already selected items from autocompletion list.
15 * HTML list is never updated, so removing a tag will add it back to awesomplete.
16 *
17 * FIXME: This a workaround waiting for awesomplete to handle this.
18 * https://github.com/LeaVerou/awesomplete/issues/16749
19 */
20function awesompleteUniqueTag(selector) {
21 var input = document.querySelector(selector);
22 input.addEventListener('input', function()
23 {
24 proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' ');
25 reg = /(\w+) /g;
26 while((match = reg.exec(input.value)) !== null) {
27 id = proposedTags.indexOf(match[1]);
28 if(id != -1 ) {
29 proposedTags.splice(id, 1);
30 }
31 }
32
33 awesomplete.list = proposedTags;
34 });
35}
diff --git a/tpl/editlink.html b/tpl/editlink.html
index 889d913d..14a2e6c8 100644
--- a/tpl/editlink.html
+++ b/tpl/editlink.html
@@ -2,7 +2,6 @@
2<html> 2<html>
3<head>{include="includes"} 3<head>{include="includes"}
4 <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" /> 4 <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
5 <script src="inc/awesomplete.min.js#"></script>
6</head> 5</head>
7<body 6<body
8{if="$link.title==''"}onload="document.linkform.lf_title.focus();" 7{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
@@ -45,40 +44,10 @@
45{include="page.footer"} 44{include="page.footer"}
46{/if} 45{/if}
47{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"} 46{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
47<script src="inc/awesomplete.min.js#"></script>
48<script src="inc/awesomplete-multiple-tags.js#"></script>
48<script> 49<script>
49 $ = Awesomplete.$; 50 awesompleteUniqueTag('#lf_tags');
50 awesomplete = new Awesomplete($('input[data-multiple]'), {
51 filter: function(text, input) {
52 return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
53 },
54 replace: function(text) {
55 var before = this.input.value.match(/^.+ \s*|/)[0];
56 this.input.value = before + text + " ";
57 },
58 minChars: 1
59 });
60
61 /**
62 * Remove already selected items from autocompletion list.
63 * HTML list is never updated, so removing a tag will add it back to awesomplete.
64 *
65 * FIXME: This a workaround waiting for awesomplete to handle this.
66 * https://github.com/LeaVerou/awesomplete/issues/16749
67 */
68 var input = document.querySelector('#lf_tags');
69 input.addEventListener('input', function()
70 {
71 proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' ');
72 reg = /(\w+) /g;
73 while((match = reg.exec(input.value)) !== null) {
74 id = proposedTags.indexOf(match[1]);
75 if(id != -1 ) {
76 proposedTags.splice(id, 1);
77 }
78 }
79
80 awesomplete.list = proposedTags;
81 });
82</script> 51</script>
83{/if} 52{/if}
84</body> 53</body>
diff --git a/tpl/linklist.html b/tpl/linklist.html
index 9ed28853..f6e9e82b 100644
--- a/tpl/linklist.html
+++ b/tpl/linklist.html
@@ -9,12 +9,13 @@
9 {include="page.header"} 9 {include="page.header"}
10 <div id="headerform" class="search"> 10 <div id="headerform" class="search">
11 <form method="GET" class="searchform" name="searchform"> 11 <form method="GET" class="searchform" name="searchform">
12 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" value=""> <input type="submit" value="Search" class="bigbutton"></form> 12 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" value="">
13 <input type="submit" value="Search" class="bigbutton">
14 </form>
13 <form method="GET" class="tagfilter" name="tagfilter"> 15 <form method="GET" class="tagfilter" name="tagfilter">
14 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value="" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1"> 16 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value=""
15 <datalist id="tagsList"> 17 autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
16 {loop="$tags"}<option>{$key}</option>{/loop} 18 data-list="{loop="$tags"}{$key}, {/loop}">
17 </datalist>
18 <input type="submit" value="Search" class="bigbutton"> 19 <input type="submit" value="Search" class="bigbutton">
19 </form> 20 </form>
20 {loop="$plugins_header.fields_toolbar"} 21 {loop="$plugins_header.fields_toolbar"}
@@ -42,7 +43,9 @@
42 {if="$search_type=='tags'"} 43 {if="$search_type=='tags'"}
43 <div id="searchcriteria">{$result_count} results for tags <i> 44 <div id="searchcriteria">{$result_count} results for tags <i>
44 {loop="search_crits"} 45 {loop="search_crits"}
45 <span class="linktag" title="Remove tag"><a href="?removetag={$value}">{$value} <span class="remove">x</span></a></span> 46 <span class="linktag" title="Remove tag">
47 <a href="?removetag={$value}">{$value} <span class="remove">x</span></a>
48 </span>
46 {/loop}</i></div> 49 {/loop}</i></div>
47 {/if} 50 {/if}
48 {/if} 51 {/if}
@@ -54,9 +57,17 @@
54 <div class="linkcontainer"> 57 <div class="linkcontainer">
55 {if="isLoggedIn()"} 58 {if="isLoggedIn()"}
56 <div class="linkeditbuttons"> 59 <div class="linkeditbuttons">
57 <form method="GET" class="buttoneditform"><input type="hidden" name="edit_link" value="{$value.linkdate}"><input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"></form><br> 60 <form method="GET" class="buttoneditform">
58 <form method="POST" class="buttoneditform"><input type="hidden" name="lf_linkdate" value="{$value.linkdate}"> 61 <input type="hidden" name="edit_link" value="{$value.linkdate}">
59 <input type="hidden" name="token" value="{$token}"><input type="hidden" name="delete_link"><input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();"></form> 62 <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
63 </form><br>
64 <form method="POST" class="buttoneditform">
65 <input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
66 <input type="hidden" name="token" value="{$token}">
67 <input type="hidden" name="delete_link">
68 <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete"
69 class="button_delete" onClick="return confirmDeleteLink();">
70 </form>
60 </div> 71 </div>
61 {/if} 72 {/if}
62 <span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title}</a></span> 73 <span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title}</a></span>
@@ -98,5 +109,9 @@
98 {include="page.footer"} 109 {include="page.footer"}
99 110
100<script src="inc/awesomplete.min.js#"></script> 111<script src="inc/awesomplete.min.js#"></script>
112<script src="inc/awesomplete-multiple-tags.js#"></script>
113<script>
114 awesompleteUniqueTag('#tagfilter_value');
115</script>
101</body> 116</body>
102</html> 117</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-11 03:59:06 +0000