uniapp develops APP to realize the search function at the top of the navigation bar

The renderings are as follows:

 Configure searchInput in page.json

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"searchInput":{
					"placeholder": "请输入订单关键字",
					"borderRadius":"50rpx",
					"backgroundColor": "#f1f1f1",
					"align":"left"  //对齐方式
				}
			}
		}
	}
},

The title configured by navigationBarTitleText will be blocked by the input box, so there will be no title.

To get the value entered in the search box, you can use the onNavigationBarSearchInputChanged method, which is at the same level as methods.

onNavigationBarSearchInputChanged(val) {
	console.log(val)  //val为搜索框输入的值
},

If you need to clear the value of the search box, you can use the setTitleNViewSearchInputText method to assign an empty value.

var currentWebview = this.$scope.$getAppWebview();
currentWebview.setTitleNViewSearchInputText("");  //将当前页面的搜索框的值赋为空

Note: On the real Android device , the onNavigationBarSearchInputChanged method will be called when onLoad, onShow, onPullDownRefresh, or when the setTitleNViewSearchInputText method is empty, so if you request the list data, you should pay attention, otherwise the list data will be requested repeatedly. But on the ios real machine , the onNavigationBarSearchInputChanged method will not be called when onLoad, onShow, onPullDownRefresh, or when the value is assigned to empty by the setTitleNViewSearchInputText method.

If you need to display the search box and the title on the top navigation bar at the same time, you can use the buttons of app-plus to display the title.

As shown below:

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"searchInput":{  //搜索框
					"placeholder": "请输入订单关键字",
					"borderRadius":"50rpx",
					"backgroundColor": "#f1f1f1",
					"align":"left"   //对齐方式
				},
				"buttons": [{
					"text": "订单信息",
					"float":"left",   //控制标题显示的左右位置,"float":"left"就在搜索框右边了
					"fontSize":"28rpx",
					"fontWeight":"bold",
					"width":"auto"   //这个一定要加
				}]
			}
		}
	}
},

Note: "width":"auto" must be added, if not, the title will be displayed incompletely on some mobile phones.

Icons can also be displayed in buttons

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"buttons": [{
					"text": "\ue000",   //图标
					"fontSrc": "/static/icon/iconfont.ttf",
					"fontSize": "22px",
					"color": "#55D88A"
				}]
			}
		}
	}
},