本例使用vue编写（因为容易）
主要是数据要对应
html:

<div ng-app="myApp" ng-controller="myCtrl"><div class="top"><img src="./r.png" alt="" srcset=""><p>科室列表</p></div><div class="search d3"><input type="text" placeholder="请输入科室" ng-model='searchText'><img src="./a.png" alt="" srcset=""></div><div class="depts" ng-repeat="i in depts" ng-show="showmenus"><div class="name" id="{{i.name}}">{{i.name}}</div><div class="dept" ng-repeat='x in i.cities' ng-click="toDoc()">{{x.name}}<img src="./r.png" alt="" srcset=""></div></div><div class="depts" ng-repeat="i in depts" ng-show="!showmenus"><div class="dept" id="{{i.name}}" ng-click="toDoc()">{{i.name}}<img src="./r.png" alt="" srcset=""></div></div><ul class='menus' ng-style="myObj" ng-show="showmenus"><li class="menu" ng-repeat="i in Depts"><a href="#{{i.name}}">{{i.name}}</a></li></ul></div>

js：

var app = angular.module('myApp', []);app.controller('myCtrl', function ($scope) {$scope.toDoc = function () {console.log(111);}$scope.showmenus = true;$scope.Depts = [{name: "A",cities: [{name: "1234",tags: "ANSHAN,闉嶅北甯�",cityid: 64},{name: "1243",tags: "ANQING,瀹夊簡甯�",cityid: 149},{name: "1324",tags: "ANYANG,瀹夐槼甯�",cityid: 174},{name: "12345",tags: "ALASHANMENG,闃挎媺鍠勭洘",cityid: 202},{name: "爱尔兰",tags: "ABAZHOU,闃垮潩宸�",cityid: 290},{name: "爱沙尼亚",tags: "ANSHUN,瀹夐『甯�",cityid: 294},]},{name: "B",cities: [{name: "表达式",tags: "BEIJING,鍖椾含甯�",cityid: 1},{name: "比较",tags: "BAODING,淇濆畾甯�",cityid: 62},{name: "鼻孔",tags: "BAOTOU,鍖呭ご甯�",cityid: 63},]},{name: "C",cities: [{name: "初学者",tags: "CHENGDU,鎴愰兘甯�",cityid: 17},{name: "刺种荇菜",tags: "CHONGQING,閲嶅簡甯�",cityid: 18},{name: "成长",tags: "CHANGSHA,闀挎矙甯�",cityid: 24},]},{name: "D",cities: [{name: "地方",tags: "DALIAN,澶ц繛甯�",cityid: 14},{name: "打工",tags: "DONGWAN,涓滆帪甯�",cityid: 21},{name: "等会",tags: "DAQI等会NG,澶у簡甯�",cityid: 48},]},{name: "E",cities: [{name: "儿",tags: "EERDUOSI,閯傚皵澶氭柉甯�",cityid: 43},{name: "儿童",tags: "EZHOU,閯傚窞甯�",cityid: 230},{name: "二胎",tags: "ENSHIZHOU,鎭╂柦宸�",cityid: 235}]},{name: "F",cities: [{name: "放到",tags: "FUZHOU,绂忓窞甯�",cityid: 34},{name: "房管",tags: "FOSHAN,浣涘北甯�",cityid: 36},{name: "返回",tags: "FUSHUN,鎶氶『甯�",cityid: 66},]},{name: "G",cities: [{name: "个人",tags: "GUANGZHOU,骞垮窞甯�",cityid: 3},{name: "感悟",tags: "GUIYANG,璐甸槼甯�",cityid: 82},{name: "过分",tags: "GANZHOU,璧ｅ窞甯�",cityid: 102},{name: "挂号",tags: "GUILIN,妗傛灄甯�",cityid: 135},]},];$scope.depts = $scope.Deptsh = -$scope.depts.length * 50 / 2 + "px";        //菜单位置初始化$scope.myObj = {"margin-top": h,}$scope.timer = null;        //延时搜索function checkAdult(arr) {     //过滤return arr.name.indexOf($scope.searchText) != -1}//监听input值搜所过滤$scope.$watch('searchText', function (nv, ov) {//nv代表新的值，ov代表旧的值if (nv != undefined) {var that = this;clearTimeout($scope.timer)$scope.timer = setTimeout(() => {console.log(nv)if (nv == '') {$scope.depts = $scope.Depts;$scope.showmenus = true;} else {$scope.depts = [];let arr = []$scope.Depts.forEach(element => {arr = arr.concat(element.cities.filter(checkAdult))});$scope.depts = arr;$scope.showmenus = false;}console.log($scope.depts)$scope.$apply();}, 500)}})});

css：

* {margin: 0;padding: 0;}.top {height: 70px;}.top img {position: absolute;top: 15px;width: 40px;height: 40px;}.top p {font-size: 35px;line-height: 70px;padding-left: 70px;font-weight: bold;}.d3 {display: flex;background: #A3D0C3;position: relative;height: 70px;width: 100%;padding: 10px;box-sizing: border-box;}.d3 input {/* flex-grow: 1; */width:calc(100% - 20px);margin: 0 10px;text-indent: 10px;border: none;height: 50px;padding-left: 50px;font-size: 30px;border-radius: 8px;outline: none;}.d3 img {height: 32px;width: 32px;position: absolute;left: 25px;top: 19px;}.depts .name {padding: 0 20px;height: 50px;line-height: 50px;background-color: azure;font-size: 20px;border-bottom: 1px solid #eee;color: aqua;}.depts .dept {padding: 0 20px;height: 70px;line-height: 70px;background-color: #fff;border-bottom: 1px solid #eee;font-size: 35px;position: relative;}.dept img {width: 30px;height: 30px;position: absolute;right: 50px;top: 20px;}.menus {position: fixed;right: 10px;color: #000;font-size: 20px;top: 50%;line-height: 100vh;}ul {list-style-type: none;}.menu {width: 50px;text-align: center;line-height: 50px;font-size: 30px;}a {text-decoration: none;color: #000;}a:active {color: aqua;}