老师请看一下这里的自动完成功能为啥没有实现，谢谢
来源：3-1 改写搜索框功能--搜索验证
慕函数4234673
2020-03-10 18:44:03
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>慕课网</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu" >
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow arrow transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow arrow transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow arrow transition"></i></a>
<ul class="dropdown-layer dropdown-left" >
<li class="dropdown-loading"></li>
<!-- <li><a href="###" target="_blank" class="dropdown-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow arrow transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
<div id="header_search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" name="p" placeholder="坚果一元抢购" autocomplete="off" class="search-inputbox fl">
<input type="submit" value="搜索" class="search-btn fl" >
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item text-ellipsis" title="qqqqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww">qqqqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<li>
<li class="search-layer-item text-ellipsis">qqqq<li>
<li class="search-layer-item text-ellipsis">qqqq<li> -->
</ul>
</div>
<div class="cart fr"></div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
window.jquery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showhide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/index.js">
</script>
</body>
</html>index.css
.nav-site{
width: 100%;
background: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color:#f01414;
margin-left:10px;
}
.nav-site-signup{
margin-left: 10px;
}
.nav-site-mobile{
margin-left: 10px;
}
/*dropdown*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
display: block;
height: 100%;
padding: 0 16px 0 13px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
/*width: 8px;
height:6px;
background: url(../img/dropdown-arrow.png) no-repeat;*/
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
top:42px;
background: #fff;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left: 0px;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.dropdown-item{
display: block;
height: 33px;
line-height: 33px;
color:#4d555d;
padding: 0 12px;
white-space:nowrap;
}
.dropdown-item:hover{
background: #f3f5f7;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/*.dropdown-toggle:hover{
background: #fff;
border-color: #cdd0d4;
}
.dropdown:hover .dropdown-layer{
display: block;
}
.dropdown:hover .dropdown-arrow{
background: url(../img/dropdown-arrow-active.png) no-repeat;
}*/
.active .dropdown-toggle{
background: #fff;
border-color: #cdd0d4;
}
.active .dropdown-layer{
display: block;
}
/*.active .dropdown-arrow{
background: url(../img/dropdown-arrow-active.png) no-repeat;
}*/
.header{
width:100%;
background: #f3f5f7;
height: 124px;
}
.header-logo {
display: block;
width: 136px;
height: 148px;
background: url(../img/header-logo.png) no-repeat;
margin: 36px 0 0 15px;
}
.header .search{
margin:36px 0 0 145px;
}
.cart{
}
common.css
/*公共样式*/
.container{
width: 1200px;
margin:0 auto;
}
.link{
color:#4d555d;
}
.link:hover{
color:#f01414;
}
.text-hidden{
text-indent: -99999px;
overflow: hidden;
}
.text-ellipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/*icon*/
@font-face {font-family: "iconfont";
src: url('foot/iconfont.eot?t=1583394931879'); /* IE9 */
src: url('foot/iconfont.eot?t=1583394931879#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANkAAsAAAAAB2QAAAMWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCQIIbATYCJAMMCwgABCAFhG0HQRtsBsiusHENpCFMqAQJxJprPwA8C/FA7fe/s3f33W9mJNNmbk08aihMh0rIEJnuJbzJNc2ASrhxOodA329S4Hx+4IgsEKk5PI/CkN9NLgFkSDMDIzpTgAwzJMX8j3unfyU+n2U5rr3OP3UBxgEFNNamMcUKJCBvGLuJ4AEuJ6Bct1gea9fXtgJ/CWgXEM6fMTLAv6CROvKDUkHeMDQJbxWUZs+yF7zh3w//FUrJFCLQdfPJMgMo/NWvwvi4+Nh+iuAuZ4IziohJQCIcbLTs5iUjk7yURxLv7vRcEmRL+YtFOCeW5Qf942WEHMitBKN6NOMXzCLwqxEyEEGuxY4CbuiUxrsEhfqAsu6IcO+xqnVpQdO+Mn65qG7rWL0LYo/uxx4Wn8YfRbUCydcf4XvbVy4EAmP68Uuh8Mv3sB1dy+dC6YvPY2eO5xcbl1p2Ucvo2dSsCCTt00lfjK1vB3ZufaQeTtz/E9/+9axZssAcXeu79/eP99+4zI7J57bFUP8I5Hv0UY2DZVnL8EEEhZMfkV391ZONg23wPnM1RFYxJhkI6694Uq0Lafj+qquqDV40X/8Jl28YMnTD6MPPfWnzawYbXxgEmsWKrIbi8Sf+RFGwf7F3teaQdOm/f0UCP5/jruIJDLMBpTdpDfx07sCCFPOBNqaQgzlpPNrM55XUymO7IuCo9zVd1jQ4l6BUUwaZEl0QlRpEE2USCiosglypFVBuQsXoCg0ILyGVYdy0BkGtW8hU+wZRrVc0UT6hoNkf5GpDhHI7Q8OUFYbDmfI1VxFDkQHqR6GZdTow0lOByG9GRt7GkDyfU9sR4cx+mDQ9W45XIAciS/TghozJlGKIidMOy7XVkM3mhC7itCCWxpsodWUnzJxsOlM867QDgTUIhEEhBpDeKMiM5eSAaWlKUPl8M8SIZ8MgHaQRezuE4Jgrh5LESxyAVkgcg0iPcgpniFEyisIgjHCyg8o1E2KDESfI1dzIAmFR8UwTQi7ZEoxieKgkfnuZ/f+WQTmwdwxZiCHJb59hbEyc5NQlfphnTSgO83rkAAAAAA==') format('woff2'),
url('foot/iconfont.woff?t=1583394931879') format('woff'),
url('foot/iconfont.ttf?t=1583394931879') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('foot/iconfont.svg?t=1583394931879#iconfont') format('svg'); /* iOS 4.1- */
}
.arrow {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*dropdown*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
/* background-repeat: no-repeat;*/
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
}
.dropdown-left{
left: 0px;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
/*showhide*/
.transition {
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.fadeOut {
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
/* menu dropdown*/
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 13px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
z-index: 2;
}
.menu .dropdown-arrow{
display: inline-block;
/* width: 8px;
height:6px;
background-image: url(../img/dropdown-arrow.png) ;*/
margin-left: 8px;
}
.menu .dropdown-layer{
top:43px;
background: #fff;
border: 1px solid #cdd0d4;
}
.menu .menu-item{
display: block;
height: 33px;
line-height: 33px;
color:#4d555d;
padding: 0 12px;
white-space:nowrap;
}
.menu .menu-item:hover{
background: #f3f5f7;
}
.menu.menu-active .dropdown-toggle{
background: #fff;
border-color: #cdd0d4;
}
/*.menu.menu-active .dropdown-layer{
display: block;
}*/
/*.menu.menu-active .dropdown-arrow{
background-image: url(../img/dropdown-arrow-active.png)
}*/
[class*="-active"] .arrow{
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*drop-loading*/
.dropdown-loading{
width: 32px;
height: 32px;
background-image: url(../img/loading.gif) no-repeat;
margin: 20px;
}
/*search*/
.search{
position: absolute;
border:1px solid #cfd2d5;
}
.search-inputbox{
width: 585px;
height: 40px;
line-height: 40px;
color:#333;
padding:0 10px;
border:none;
background: #fff;
}
.search-btn{
width: 73px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color:#fff;
background: #07111b;
cursor: pointer;
border: none;
}
.search-layer{
display: none;
position: absolute;
top:100%;
left:-1px;
width: 100%;
border:1px solid #cfd2d5;
background: #fff;
}
.search-layer-item{
height: 24px;
line-height: 24px;
padding:0 10px;
cursor: pointer;
}
.search-layer-item:hover{
background: #f3f5f7;
}
search.js
(function($){
function Search($elem,options){
this.$elem=$elem
this.options=options
this.$form=$elem.find(".search-form")
this.$input=$elem.find(".search-inputbox")
this.$btn=$elem.find(".search-btn")
this.$layer=$elem.find(".search-layer")
this.$layerItem=$elem.find(".search-layer")
this.$elem.on("click",this.$btn,$.proxy(this.submit,this))
if(this.options.autocomPlete){
this.autocomPlete()
}
}
Search.DEFAULTS= {
autocomPlete:false,
url: 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=',
css3:false,
js: false,
animation: 'fade'
}
Search.prototype.submit=function(){
if($.trim(this.$input.val())===""){
return false
}
this.$form.submit()
}
Search.prototype.autocomPlete=function(){
this.$input.on("input",$.proxy(this.getData,this)).
on("focus",$.proxy(this.showLayer,this))
.on("click",function(){return false})
$(document).on("click",$.proxy(this.hideLayer,this))
this.$layer.showHide(this.options)
}
Search.prototype.getData=function(){
var self=this
$.ajax({
url:this.options.url+($.trim(this.$input.val())),
dataType:"jsonp"
}).done(function(data){
//发送事件
self.$elem.trigger("search-getData",[data])
}).fail(function(){
self.$elem.trigger("search-noData",[data])
})
}
Search.prototype.showLayer=function(){
if(this.$layer.children().length===0) return;
this.$layer.showHide("show");
}
Search.prototype.hideLayer=function(){
this.$layer.showHide("hide")
}
//添加的插件
$.fn.extend({
search:function(option){
return this.each(function(){
$this=$(this)
var search=$this.data("search")
var options=$.extend({},Search.DEFAULTS,$this.data(),typeof option==="object"&& option)
if(!search){
$this.data("search",search=new Search($this,options))
// console.log($this.data("dropdown"))
}
if(typeof search[option]==="function"){
search[option]()
}
})
}
})
})(jQuery)
// (function(){
// var $search=$(".search")
// var $form=$search.find(".search-form")
// var $input=$search.find(".search-inputbox")
// var $btn=$search.find(".search-btn")
// var $layer=$search.find(".search-layer")
// var $layerItem=$search.find(".search-layer")
// //验证
// $btn.on("click",function(){
// if($.trim($input.val())===""){
// return false
// }
// })
// // $form.on("submit",function(){
// // if($.trim($input.val())===""){
// // return false
// // }
// // })
// //自动完成
// $input.on("input",function(){
// var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim($input.val()));
// $.ajax({
// url:url,
// dataType:"jsonp",
// // success:function(data){
// // console.log(data)
// // },
// // error:function(error){
// // console.log(error)
// // }
// }).done(function(data){//当传递成功时，应该做的事情
// var html=""
// var dataNum=data["result"].length
// var maxNum=10
// if( dataNum===0) {
// $layer.hide().html('')
// return
// }
// for(var i=0;i<dataNum;i++){
// if(i>maxNum) break
// html+='<li class="search-layer-item text-ellipsis">'+data["result"][i][0]+'<li>'
// $layer.html(html).show()
// }
// }).fail(function(){//当传递失败时，应该做的事情
// $layer.hide().html('')
// }).always(function(){
// })
// })
// //事件代理
// $layer.on("click",".search-layer-item",function(){
// $input.val($(this).text())
// //当点击表单search-layer-item时提交表单
// $form.submit()
// })
// $input.on("focus",function(){
// $layer.show()
// })
// $input.on("click",function(){
// return false
// })
// $(document).on("click",function(){
// $layer.hide()
// })
// })(jQuery)index.js
// nav-site利用js方式
// $(".dropdown").hover(function(){
// $(this).addClass("active")
// },function(){
// $(this).removeClass("active")
// })
// drowdown
//接受数据
$(".dropdown").on("dropdown-show",function(e){
//console.log(e.type)
$this=$(this)
//按需加载
dataLoad=$this.data("load")
if(!dataLoad) return
if(!$this.data("loaded")){
var $layer=$this.find($(".dropdown-layer"))
var html=''
// //在获取文件之前做的事情
// $layer.html('<li class="dropdown-loading"></li>')
//获取文件
$.getJSON(dataLoad,function(data){
//console.log(data)
setTimeout(function(){
for(var i=0;i<data.length;i++){
html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
}
$layer.html(html)},2000)
$this.data("loaded",true)
})
}
})
$(".dropdown").dropdown({
event:'hover',
css3:true,
js:true,
animation:'fade',
delay:200
})
//header search
var $headersearch=$("#header_search")
var html=""
var maxNum=10
//接受数据
$headersearch.on("search-getData",function(e,data){
html=creatHeaderSearchLayer(data,maxNum)
$(this).find(".search-layer").text(html)
if(html){
$(this).search("showLayer")
}else{
$(this).search("hideLayer")
}
}).on("search-noData",function(){
$(this).search("hideLayer")
$(this).find(".search-layer").text("")
}).on("click",".search-layer-item",function(){
$input.val($(this).text())
//当点击表单search-layer-item时提交表单
search(submit())
})
$("#header_search").search({
autocomPlete:true,
css3:false,
js: false,
animation: 'fade'
})
//创建HTML结构
function creatHeaderSearchLayer(data,maxNum){
var html=""
var dataNum=data["result"].length
if( dataNum===0) {
return '';
}
for(var i=0;i<dataNum;i++){
if(i>=maxNum) break
html+='<li class="search-layer-item text-ellipsis">'+data["result"][i][0]+'<li>'
}
return html;
}
1回答
-
好帮手慕星星
2020-03-10
同学你好，问题解答如下：
1、search.js中自动完成方法和参数中的自动完成属性名称冲突
2、index.js文件中添加内容需要用html方法，才可以解析标签
3、需要在服务器进行测试才可以获取数据
自己再测试下，祝学习愉快！
0
相似问题