通过按键事件获取到浏览器地址栏联想记录

//地址栏输入框组件 
@Component 
export struct LocationBar { 
@State message: string = 'Hello World' 
textInputController: TextInputController = new TextInputController() 
@Link searchSugResult: string[]; 
private index :number=0 
@State url: string = "http://www.baidu.com"; 
​ 
build() { 
  Row(){ 
    TextInput({ 
      text: this.url, 
      controller: this.textInputController 
    }) 
      .onKeyEvent((event: KeyEvent) => {//按键事件 
      if (event.type === KeyType.Down) { 
        console.log(this.index.toString()) 
        if (event.keyCode === 2013) {//2013代表 键盘中 下 键 
          this.url = this.searchSugResult[this.index].toString() 
          if (this.searchSugResult.length-1 === this.index) { 
            this.index = -1 
          } 
          this.index++ 
        } 
        if (event.keyCode === 2012) {//2012代表 键盘中 上 键 
          this.url = this.searchSugResult[this.index].toString() 
          if (this.index<=0) { 
            this.index = this.searchSugResult.length 
          } 
          this.index-- 
        } 
      } 
      }) 
      .width('800vp') 
      .onChange(value => { 
        this.url = value; 
      }) 
    Button('搜索', { type: ButtonType.Capsule, stateEffect: true }) 
      .width('100vp') 
      .height('36vp') 
      .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 
      .backgroundColor($r('sys.color.ohos_id_color_button_normal')) 
      .onClick(() => { 
        // this.webviewController.loadUrl(this.url); 
      }) 
  } 
} 
}
//展示地址栏联想记录 
@Component 
export struct SearchSugItem { 
@State searchSug: string = ''; 
url: string = ""; 
@State isHover: boolean = false 
@State eventType: string = '' 
@Styles 
pressStyles(){ 
  .backgroundColor($r('sys.color.ohos_id_color_click_effect')) 
} 
​ 
@Styles 
focusStyles(){ 
  .backgroundColor($r('sys.color.ohos_id_color_focused_outline')) 
  .padding({ left: '2vp', right: '2vp', top: '2vp', bottom: '2vp' }) 
} 
​ 
@Styles 
normalStyles(){ 
  .backgroundColor(this.isHover ? $r('sys.color.ohos_id_color_hover') : Color.Transparent) 
  .borderRadius(this.isHover ? 16 : 0) 
} 
​ 
build() { 
  Row(){ 
    Text(this.searchSug) 
      .fontSize('16vp') 
      .maxLines(1) 
      .fontColor($r('sys.color.ohos_id_color_text_primary')) 
      .fontSize($r('sys.float.ohos_id_text_size_body1')) 
      .fontFamily($r('sys.string.ohos_id_text_font_family_regular')) 
      .focusable(true)//让text组件能够获取到焦点 
  } 
  .width('100%') 
  .height('48vp') 
  .stateStyles({ 
    focused: this.focusStyles, 
    pressed: this.pressStyles, 
    normal: this.normalStyles 
  }) 
  .onHover((isHover: boolean = false) => { 
    this.isHover = isHover 
  }) 
} 
}
import { SearchSugItem } from './SearchSugItem'; 
​ 
//ForEach遍历关联出来的历史记录 
@Component 
export struct SugList { 
@Link searchSugResult: string[]; 
private searchSugResult1 : Map<number,string>; 
@State twoButtonColor: string = '#87CEFA'; 
url: string = ""; 
build() { 
  List() { 
    ForEach(this.searchSugResult, (model: string,index1:number) => { 
      ListItem() { 
        SearchSugItem({searchSug:model}) 
      }.focusOnTouch(true) 
    }) 
  } 
  .focusOnTouch(true) 
  .width('800vp') 
  .padding({ right: '200vp'}) 
  .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 
  .borderRadius(20) 
  .shadow({ 
    radius: 20, 
    color: Color.Black, 
    offsetX: 0, 
    offsetY: 2 
  }) 
} 
​ 
aboutToAppear(){ 
  for (let index = 0; index < 10; index++) { 
    this.searchSugResult.push('搜索联想'+index) 
  } 
} 
}
import web_webview from '@ohos.web.webview'; 
import { LocationBar } from './LocatioBar'; 
import { SugList } from './SugList'; 
//主页面 
@Entry 
@Component 
struct Index { 
@State searchSug: string = ''; 
@State searchSugResult: string[] = []; 
textInputController: TextInputController = new TextInputController() 
webviewController: WebviewController = new web_webview.WebviewController(); 
url: string = ""; 
build() { 
  Row() { 
    Column() { 
      LocationBar({searchSugResult:this.searchSugResult}) 
      SugList({searchSugResult:this.searchSugResult}) 
      // DateComponent({selectedDate:this.parentSelectedDate}) 
    } 
    .width('100%') 
  } 
  .height('100%') 
} 
}