js实现百度搜索提示框

效果如下所示

话不多说，请看代码：

！doctype html html hearteta charset=' UTF-8 '标题百度搜索提示框/title style * { margin : 0；padd : 0；大纲：无；} .搜索101 { width : 650 px余量： 300像素汽车；font-size : 0；} .sou 1 {宽度： 514 px高度： 40pxcolor: # 666font: 16px微软雅黑；border: 1px固体rgba(170，170，170，9);右边框： 0；边框半径： 2px 0 0 2px背景： rgba(255，255，255，9);padding: 0 30px 0 3px垂直对齐： 顶部；显示器：内联块；transition:2s }。sou 2 {宽度： 100 px高： 42pxfont: 16px微软雅黑；color: rgba(255，255，255，9);背景： rgba(0，170，240，1)；边框： 0；边框-左侧： 1px实心rgba(0，170，240，1)；边框半径： 0 2px 2px 0边距： 0-1px；垂直对齐： 顶部；transition : 3 display :内联块；光标：指针；} .sou 2:悬停{背景： rgba(0，140，220，9);} .sou 1: focus { color : # 333border: 1px固体rgba(0，170，240，1)；右边框：无；}/style/head body div class=' search 101 ' form action=' http://www .百度。com/Baidu ' class=' search-form ' method=' id=' search-form ' input id=' ipt 1 ' name=' TN ' type=' hidden ' value=' Baidu ' input type=' text ' id=' sou 1 ' class=' sou 1 ' name=' word ' maxlength=' 8048 ' value=' placeholder=' Baidug=1 onmouseover=' focus()' input type='百度一下/form /div！-百度搜索提示-script charset=' gbk ' src=' http :http://www。百度。com/js/open sug。js '/脚本！- we124.com/libs/js/opensug.js(无徽标)-编写document.getElementById('sou1 ')的脚本。焦点();var txtObj=文档。getelementbyid(' alertSpan ')；//回调函数，用于获取用户当前选择的文字函数show(str){ txtobj。innerhtml=str} var params={ 'XOffset': 0，//提示框位置横向偏移量，单位px 'YOffset': 0，//提示框位置纵向偏移量，单位px 'width': 204，//提示框宽度，单位px 'fontColor': '#666 '，//提示框文字颜色fontColorHI': '#222 '，//提示框高亮选择时文字颜色fontSize': '16px '，//文字大小fontFamily': '微软雅黑', //文字字体borderColor': '#d8d8d8 '，//提示框的边框颜色bgcolorHI': '#e8e8e8 '，//提示框高亮选择的颜色sugSubmit': true，//在选择提示词条是是否提交表单};BaiduSuggestion.bind('ipt1 '，params，show)；/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！