• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# <search> Development
2
3
4The **<search>** component provides an input area for users to search. For details, see [search](../reference/arkui-js/js-components-basic-search.md).
5
6
7## Creating a <search> Component
8
9Create a **<search>** component in the .hml file under **pages/index**.
10
11
12```html
13<!-- xxx.hml-->
14<div class="container">
15  <search></search>
16</div>
17```
18
19
20```css
21/* xxx.css */
22.container {
23  width: 100%;
24  height: 100%;
25  flex-direction: column;
26  align-items: center;
27  justify-content: center;
28  background-color: #F1F3F5;
29}
30```
31
32![en-us_image_0000001276003537](figures/en-us_image_0000001276003537.png)
33
34
35## Setting Attributes
36
37Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box.
38
39
40```html
41<!-- xxx.hml-->
42<div class="container">
43  <search hint="Please enter the search content"  searchbutton="search" icon="/common/search1.png"></search>
44</div>
45```
46
47
48```css
49/* xxx.css */
50.container {
51  width: 100%;
52  height: 100%;
53  flex-direction: column;
54  align-items: center;
55  justify-content: center;
56  background-color: #F1F3F5;
57}
58```
59
60![en-us_image_0000001275923017](figures/en-us_image_0000001275923017.png)
61
62
63## Adding Styles
64
65Set **color**, **placeholder-color**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
66
67
68```html
69<!-- xxx.hml-->
70<div class="container">
71  <search hint="Please enter the search content"  searchbutton="search" ></search>
72</div>
73```
74
75
76```css
77/* xxx.css */
78.container {
79  width: 100%;
80  height: 100%;
81  flex-direction: column;
82  align-items: center;
83  justify-content: center;
84  background-color: #F1F3F5;
85}
86search{
87  color: black;
88  placeholder-color: black;
89  caret-color: red;
90}
91```
92
93![en-us_image_0000001232003020](figures/en-us_image_0000001232003020.gif)
94
95
96## Binding Events
97
98Add the **change**, **search**, **submit**, **share**, and **translate** events to the **&lt;search&gt;** component to perform operations on the input information.
99
100
101```html
102<!-- xxx.hml-->
103<div class="container">
104  <text style="margin-left: -7px;">
105    <span>Enter text and then touch and hold what you've entered</span>
106  </text>
107  <search hint="Please enter the search content"  searchbutton="search" onsearch="search" onchange="change" ontranslate="translate" onshare="share"
108  onsubmit="submit">
109  </search>
110</div>
111```
112
113
114```css
115/* xxx.css */
116.container {
117  width: 100%;
118  height: 100%;
119  flex-direction: column;
120  align-items: center;
121  justify-content: center;
122  background-color: #F1F3F5;
123}
124text{
125  width: 100%;
126  font-size: 25px;
127  text-align: center;
128  margin-bottom: 100px;
129}
130```
131
132
133```js
134// index.js
135import promptAction from '@ohos.promptAction'
136export default {
137  search(e){
138    promptAction.showToast({
139      message:  e.value,
140      duration: 3000,
141    });
142  },
143  translate(e){
144    promptAction.showToast({
145      message:  e.value,
146      duration: 3000,
147    });
148  },
149  share(e){
150    promptAction.showToast({
151      message:  e.value,
152      duration: 3000,
153    });
154  },
155  change(e){
156    promptAction.showToast({
157      message:  e.value,
158      duration: 3000,
159    });
160  },
161  submit(e){
162    promptAction.showToast({
163      message: 'submit',
164      duration: 3000,
165    });
166  }
167}
168```
169
170![en-us_image_0000001231683164](figures/en-us_image_0000001231683164.gif)
171
172
173## Example Scenario
174
175In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or **&lt;input&gt;** component from the drop-down list box to implement the respective function.
176
177
178```html
179<!-- xxx.hml-->
180<div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;">
181  <select class="slt1" id="slt1" onchange="setfield">
182    <option value="search">search</option>
183    <option value="textarea">Textarea</option>
184    <option value="input">Input</option>
185  </select>
186  <div if="{{showsearch}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
187    <search class="field" id="search1" hint="search1" onsubmit="submit" onchange="change" ></search>
188    <search class="field" id="search2" icon="common/search1.png" hint="search2" show="{{showsec}}" onsubmit="submit" onchange="change" ></search>
189  </div>
190  <div if="{{showtextarea}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
191    <textarea class="field" id="textarea1" extend="true" placeholder="textarea1" onchange="change" ></textarea>
192    <textarea class="field" id="textarea2" extend="true" placeholder="textarea2" onchange="change" show="{{showsec}}"></textarea>
193  </div>
194  <div if="{{showinput}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
195    <input type="text" class="field" id="input1" placeholder="input1" onchange="change" ></input>
196    <input type="text" class="field" id="input2" placeholder="input2" onchange="change" show="{{showsec}}"></input>
197  </div>
198</div>
199```
200
201
202```css
203/* xxx.css */
204.field {
205  width: 80%;
206  color: mediumaquamarine;
207  font-weight: 600;
208  placeholder-color: orangered;
209}
210.slt1{
211  font-size: 50px;
212  position: absolute;
213  left: 50px;
214  top: 50px;
215}
216```
217
218
219```js
220// index.js
221import promptAction from '@ohos.promptAction';
222export default {
223  data: {
224    showsearch: true,
225    showtextarea: false,
226    showinput: false,
227    showsec: true,
228  },
229  setfield(e) {
230    this.field = e.newValue
231    if (e.newValue == 'search') {
232      this.showsearch = true
233      this.showtextarea = false
234      this.showinput = false
235    } else if (e.newValue == 'textarea') {
236      this.showsearch = false
237      this.showtextarea = true
238      this.showinput = false
239    } else {
240      this.showsearch = false
241      this.showtextarea = false
242      this.showinput = true
243    }
244  },
245  submit(e) {
246    promptAction.showToast({
247      message: 'Search!',
248      duration: 2000
249    })
250  },
251  change(e) {
252    promptAction.showToast({
253      message: 'Content:'+ e.text,
254      duration: 2000
255    })
256  }
257}
258```
259
260![en-us_image_0000001232003024](figures/en-us_image_0000001232003024.gif)
261