| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Search input"
|
|
|
4 |
description: "find items in a collection of data"
|
|
|
5 |
date: 2020-08-26T16:32:24+01:00
|
|
|
6 |
draft: false
|
|
|
7 |
weight: 60
|
|
|
8 |
tags:
|
|
|
9 |
- Introduced in Moodle 3.10
|
|
|
10 |
- MDL-69454
|
|
|
11 |
---
|
|
|
12 |
|
|
|
13 |
## How it works
|
|
|
14 |
|
|
|
15 |
Single searches allow the user the quickly search a collection of data. A search is input in the search field and the results are shown immediately (using JS) or after the search has been posted to Moodle.
|
|
|
16 |
|
|
|
17 |
Searches are used in the page navbar, blocks, module pages, settings, the contentbank etc.
|
|
|
18 |
|
|
|
19 |
## Example
|
|
|
20 |
|
|
|
21 |
<div class="small">
|
|
|
22 |
Default search input.
|
|
|
23 |
</div>
|
|
|
24 |
{{< mustache template="core/search_input" >}}
|
|
|
25 |
{
|
|
|
26 |
"action": "https://moodle.local/admin/search.php",
|
|
|
27 |
"extraclasses": "my-2",
|
|
|
28 |
"inputname": "search",
|
|
|
29 |
"inform": false,
|
|
|
30 |
"searchstring": "Search something",
|
|
|
31 |
"hiddenfields": [
|
|
|
32 |
{
|
|
|
33 |
"name": "context",
|
|
|
34 |
"value": "11"
|
|
|
35 |
}
|
|
|
36 |
]
|
|
|
37 |
}
|
|
|
38 |
{{< /mustache >}}
|
|
|
39 |
<div class="mt-3 small">
|
|
|
40 |
Emphasized search input using .btn-primary
|
|
|
41 |
</div>
|
|
|
42 |
{{< mustache template="core/search_input" >}}
|
|
|
43 |
{
|
|
|
44 |
"action": "https://moodle.local/admin/search.php",
|
|
|
45 |
"extraclasses": "my-2",
|
|
|
46 |
"uniqid": "Unique string",
|
|
|
47 |
"inputname": "search",
|
|
|
48 |
"inform": false,
|
|
|
49 |
"btnclass": "btn-primary",
|
|
|
50 |
"searchstring": "Search something",
|
|
|
51 |
"hiddenfields": [
|
|
|
52 |
{
|
|
|
53 |
"name": "context",
|
|
|
54 |
"value": "11"
|
|
|
55 |
}
|
|
|
56 |
]
|
|
|
57 |
}
|
|
|
58 |
{{< /mustache >}}
|
|
|
59 |
|
|
|
60 |
**Use**
|
|
|
61 |
|
|
|
62 |
Use a default search input when searching is not expected to be the primary action on this page. Use the emphasized search when it is the default action AND the only search input found on the page. (except the navbar search).
|
|
|
63 |
|
|
|
64 |
**Variables**
|
|
|
65 |
|
|
|
66 |
* action: used to specify the form (get) action
|
|
|
67 |
* extraclasses: add these css classes to the search wrapper
|
|
|
68 |
* uniqid: Unique string
|
|
|
69 |
* inputname: form field name for search input
|
|
|
70 |
* inform: search is part of a larger form
|
|
|
71 |
* query: current search value from user input
|
|
|
72 |
* btnclass: use a btn class for the btn design, (btn-secondary, btn-primary)
|
|
|
73 |
* searchstring: string describing current search for placeholder and aria-label
|
|
|
74 |
* hiddenfields: array with name valua pairs for extra hidden form fields
|
|
|
75 |
|
|
|
76 |
<div class="my-5"></div>
|
|
|
77 |
|
|
|
78 |
### Auto search input with clear option
|
|
|
79 |
|
|
|
80 |
{{< mustache template="core/search_input_auto" >}}
|
|
|
81 |
{
|
|
|
82 |
"placeholder": "Search settings",
|
|
|
83 |
"uniqid": "45"
|
|
|
84 |
}
|
|
|
85 |
{{< /mustache >}}
|
|
|
86 |
|
|
|
87 |
**Use**
|
|
|
88 |
|
|
|
89 |
This search option is used when the search imput immediately triggers updating data displayed below the search, for example: a table of usernames. It includes a clear button that clears the input on typeing.
|
|
|
90 |
|
|
|
91 |
**Variables**
|
|
|
92 |
|
|
|
93 |
* uniqid: Unique string
|
|
|
94 |
* placeholder: search placeholder
|
|
|
95 |
|
|
|
96 |
<div class="my-5"></div>
|
|
|
97 |
|
|
|
98 |
### Navbar search form
|
|
|
99 |
|
|
|
100 |
{{< mustache template="core/search_input_navbar" >}}
|
|
|
101 |
{
|
|
|
102 |
"action": "https://moodle.local/admin/search.php",
|
|
|
103 |
"inputname": "search",
|
|
|
104 |
"searchstring": "Search",
|
|
|
105 |
"hiddenfields": [
|
|
|
106 |
{
|
|
|
107 |
"name": "cmid",
|
|
|
108 |
"value": "11"
|
|
|
109 |
}
|
|
|
110 |
]
|
|
|
111 |
}
|
|
|
112 |
{{< /mustache >}}
|
|
|
113 |
|
|
|
114 |
**Use**
|
|
|
115 |
|
|
|
116 |
This search should be used once on the page and triggers a global site search. It uses a minimal amount of space to prevent breakage on mobile use.
|
|
|
117 |
|
|
|
118 |
**Features**
|
|
|
119 |
|
|
|
120 |
* click search button to start typing
|
|
|
121 |
* click close button to hide search
|
|
|
122 |
* click enter after input to post the form
|
|
|
123 |
* uses very little space
|
|
|
124 |
* overlaps navbar when viewed on mobile.
|