1# search开发指导 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @kangshihui--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9 10提供搜索框组件，用于提供用户搜索内容的输入区域，具体用法请参考[search](../reference/apis-arkui/arkui-js/js-components-basic-search.md)。 11 12 13## 创建search组件 14 15在pages/index目录下的hml文件中创建一个search组件。 16 17 18```html 19<!-- xxx.hml--> 20<div class="container"> 21 <search></search> 22</div> 23``` 24 25 26```css 27/* xxx.css */ 28.container { 29 width: 100%; 30 height: 100%; 31 flex-direction: column; 32 align-items: center; 33 justify-content: center; 34 background-color: #F1F3F5; 35} 36``` 37 38 39 40 41## 设置属性 42 43通过设置hint、icon和searchbutton属性设置搜索框的提示文字、图标和末尾搜索按钮的内容。 44 45 46```html 47<!-- xxx.hml--> 48<div class="container"> 49 <search hint="Please enter the search content" searchbutton="search" icon="/common/search1.png"></search> 50</div> 51``` 52 53 54```css 55/* xxx.css */ 56.container { 57 width: 100%; 58 height: 100%; 59 flex-direction: column; 60 align-items: center; 61 justify-content: center; 62 background-color: #F1F3F5; 63} 64``` 65 66 67 68 69## 添加样式 70 71通过color、placeholder-color和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。 72 73 74```html 75<!-- xxx.hml--> 76<div class="container"> 77 <search hint="Please enter the search content" searchbutton="search" ></search> 78</div> 79``` 80 81 82```css 83/* xxx.css */ 84.container { 85 width: 100%; 86 height: 100%; 87 flex-direction: column; 88 align-items: center; 89 justify-content: center; 90 background-color: #F1F3F5; 91} 92search{ 93 color: black; 94 placeholder-color: black; 95 caret-color: red; 96} 97``` 98 99 100 101 102## 绑定事件 103 104向search组件添加change、search、submit、share和translate事件，对输入信息进行操作。 105 106 107```html 108<!-- xxx.hml--> 109<div class="container"> 110 <text style="margin-left: -7px;"> 111 <span>Enter text and then touch and hold what you've entered</span> 112 </text> 113 <search hint="Please enter the search content" searchbutton="search" onsearch="search" onchange="change" ontranslate="translate" onshare="share" 114 onsubmit="submit"> 115 </search> 116</div> 117``` 118 119 120```css 121/* xxx.css */ 122.container { 123 width: 100%; 124 height: 100%; 125 flex-direction: column; 126 align-items: center; 127 justify-content: center; 128 background-color: #F1F3F5; 129} 130text{ 131 width: 100%; 132 font-size: 25px; 133 text-align: center; 134 margin-bottom: 100px; 135} 136``` 137 138 139```js 140// index.js 141import promptAction from '@ohos.promptAction'; 142export default { 143 search(e){ 144 promptAction.showToast({ 145 message: e.value, 146 duration: 3000, 147 }); 148 }, 149 translate(e){ 150 promptAction.showToast({ 151 message: e.value, 152 duration: 3000, 153 }); 154 }, 155 share(e){ 156 promptAction.showToast({ 157 message: e.value, 158 duration: 3000, 159 }); 160 }, 161 change(e){ 162 promptAction.showToast({ 163 message: e.value, 164 duration: 3000, 165 }); 166 }, 167 submit(e){ 168 promptAction.showToast({ 169 message: 'submit', 170 duration: 3000, 171 }); 172 } 173} 174``` 175 176 177 178 179## 场景示例 180 181在本场景中通过下拉菜单选择search、Textarea和Input组件来实现搜索和输入效果。 182 183 184```html 185<!-- xxx.hml--> 186<div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;"> 187 <select class="slt1" id="slt1" onchange="setfield"> 188 <option value="search">search</option> 189 <option value="textarea">Textarea</option> 190 <option value="input">Input</option> 191 </select> 192 <div if="{{showsearch}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;"> 193 <search class="field" id="search1" hint="search1" onsubmit="submit" onchange="change" ></search> 194 <search class="field" id="search2" icon="common/search1.png" hint="search2" show="{{showsec}}" onsubmit="submit" onchange="change" ></search> 195 </div> 196 <div if="{{showtextarea}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;"> 197 <textarea class="field" id="textarea1" extend="true" placeholder="textarea1" onchange="change" ></textarea> 198 <textarea class="field" id="textarea2" extend="true" placeholder="textarea2" onchange="change" show="{{showsec}}"></textarea> 199 </div> 200 <div if="{{showinput}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;"> 201 <input type="text" class="field" id="input1" placeholder="input1" onchange="change" ></input> 202 <input type="text" class="field" id="input2" placeholder="input2" onchange="change" show="{{showsec}}"></input> 203 </div> 204</div> 205``` 206 207 208```css 209/* xxx.css */ 210.field { 211 width: 80%; 212 color: mediumaquamarine; 213 font-weight: 600; 214 placeholder-color: orangered; 215} 216.slt1{ 217 font-size: 50px; 218 position: absolute; 219 left: 50px; 220 top: 50px; 221} 222``` 223 224 225```js 226// index.js 227import promptAction from '@ohos.promptAction'; 228export default { 229 data: { 230 showsearch: true, 231 showtextarea: false, 232 showinput: false, 233 showsec: true, 234 }, 235 setfield(e) { 236 this.field = e.newValue 237 if (e.newValue == 'search') { 238 this.showsearch = true 239 this.showtextarea = false 240 this.showinput = false 241 } else if (e.newValue == 'textarea') { 242 this.showsearch = false 243 this.showtextarea = true 244 this.showinput = false 245 } else { 246 this.showsearch = false 247 this.showtextarea = false 248 this.showinput = true 249 } 250 }, 251 submit(e) { 252 promptAction.showToast({ 253 message: '搜索！', 254 duration: 2000 255 }) 256 }, 257 change(e) { 258 promptAction.showToast({ 259 message: '内容:' + e.text, 260 duration: 2000 261 }) 262 } 263} 264``` 265 266 267
