输入内容input框没反应 不知道代码哪里出问题了
来源：3-3 代码优化
琥珀_2020
2020-01-05 12:55:28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./font/iconfont.css"> <title>慕淘网</title> </head> <body> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"> <a href="javascript:;" class="nav-site-login link">亲,请登录</a> </li> <li class="fl"> <a href="javascript:;" class="nav-site-signup link">免费注册</a> </li> <li class="fl"> <a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a> </li> </ul> <ul class="fr"> <li class="menu dropdown fl" data-active="menu"> <a href="" class="dropdown-toggle link transition">我的慕淘<i class="iconfont dropdown-arrow transition"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="###" class="menu-item">已买到宝贝</a></li> <li><a href="###" class="menu-item">我的足迹</a></li> </ul class="dropdown-layer"> </li> <li class="menu dropdown fl" data-active="menu"> <a href="" class="dropdown-toggle link transition">收藏夹<i class="iconfont dropdown-arrow transition"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="###" class="menu-item">收藏的宝贝</a></li> <li><a href="###" class="menu-item">收藏的店铺</a></li> </ul> </li> <li class="dropdown fl"> <a href="" class="nav-site-category link">商品分类</a> </li> <li class="menu dropdown fl" data-active="menu" data-load="./js/dropdown-seller.json"> <a href="" class="dropdown-toggle link transition">卖家中心<i class="iconfont dropdown-arrow transition"></i></a> <ul class="dropdown-layer dropdown-left"> <li class="dropdown-loading"></li> </ul> </li> <li class="nav-site-service menu dropdown fl" data-active="menu"> <a href="" class="dropdown-toggle link transition">联系客服<i class="iconfont dropdown-arrow transition"></i></a> <ul class="dropdown-layer dropdown-right"> <li><a href="###" class="menu-item">消费者客服</a></li> <li><a href="###" class="menu-item">卖家客服</a></li> </ul> </li> </ul> </div> </div> <!-- -------------header---------------------- --> <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="q" 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">111</li> <li class="search-layer-item text-ellipsis">111</li> <li class="search-layer-item text-ellipsis">111</li> --> </ul> </div> <div class="cart fr"></div> </div> </div> <script src="./js/jquery.js"></script> <script src="./js/transition.js"></script> <script src="./js/dropdown.js"></script> <script src="./js/showHide.js"></script> <script src="./js/search.js"></script> <script src="./js/index.js"></script> </body> </html>
(function () {
'use strict';
// ------------------menu----------------------------------
$('.dropdown').on('dropdown-show', function (e) {
var $this = $(this),
dataLoad = $this.data('load');
if (!dataLoad) return;
if (!$this.data('loaded')) {
var $layer = $(this).find('.dropdown-layer'),
html = '';
$.getJSON(dataLoad, function (data) {
setTimeout(function () {
for (var i = 0; i < data.length; i++) {
html += '<li><a href= "' + data[i].url + '" class="menu-item"> ' +
data[i].name + ' </a></li>'
}
$layer.html(html);
$this.data('loaded', true);
}, 1000);
});
}
});
$('.dropdown').dropdown({
css3: true,
js: false,
animation: 'fade',
delay: 200,
active: 'menu'
});
// -----------header-search---------------------------------
var $headerSearch = $('#header-search');
var html = '',
maxNum = 7;
$headerSearch.on('search-getData', function (e, data) {
var $this = $(this);
html = createHeaderSearchLayer(data, maxNum);
$this.search('appendLayer', html);
if (html) {
$this.search('showLayer');
} else {
$this.search('hideLayer');
}
}).on('search-noData', function (e) {
$(this).search('hideLayer').search('appendLayer', '');
}).on('click', '.search-layer-item', function () {
$headerSearch.search('setInputVal', $(this).html());
$headerSearch.search('submit');
});
$headerSearch.search({
autocomplete: true,
// url: '',
css3: false,
js: false,
animation: 'fade'
});
$headerSearch
function createHeaderSearchLayer(data, maxNum) {
var html = '',
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;
};
})(jQuery);(function ($) {
'use strict'
function Search($elem, options) {
this.$elem = $elem;
this.options = options;
this.$form = this.$elem.find('.search-form');
this.$input = this.$elem.find('.search-inputbox');
this.$layer = this.$elem.find('.search-layer');
this.loaded = false;
this.$elem.on('click', '.search-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=1578107456706_294&callback=jsonp295&k=1&area=c2c&bucketid=13&q=',
css3: false,
js: false,
animation: 'fade'
};
Search.prototype.submit = function () {
if (this.getInputVal() === '') {
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;
});
this.$layer.showHide(this.options);
$(document).on('click', $.proxy(this.hideLayer, this));
};
Search.prototype.getData = function () {
var self = this;
var inputVal = this.getInputVal();
if (inputVal) return self.$elem.trigger('search-noData');
if (this.jqXHR) this.jqXHR.abort();
this.jqXHR = $.ajax({
url: this.options.url + inputVal,
dataType: 'jsonp'
}).done(function (data) {
self.$elem.trigger('search-getData', [data]);
}).fail(function () {
self.$elem.trigger('search-noData', [self]);
}).always(function () {
self.jqXHR = null;
});
};
Search.prototype.showLayer = function () {
if (!this.loaded) return;
this.$layer.showHide('show');
};
Search.prototype.hideLayer = function () {
this.$layer.showHide('hide');
};
Search.prototype.getInputVal = function () {
return $.trim(this.$input.val());
};
Search.prototype.setInputVal = function (val) {
this.$input.val(removeHtmlTags(val));
function removeHtmlTags(str) {
return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
};
};
Search.prototype.appendLayer = function (html) {
this.$layer.html('html');
this.loaded = !!html;
};
$.fn.extend({
search: function (option, value) {
return this.each(function () {
var $this = $(this),
search = $this.data('search'),
options = $.extend({}, Search.DEFAULTS, $this.data(), typeof option === 'object' && option);
if (!search) {
$this.data('search', search = new Search($this, options));
}
if (typeof search[option] === 'function') {
search[option](value);
}
});
}
});
})(jQuery);
// (function ($) {
// 'use strict'
// // 需要用到的变量
// var $search = $('.search'),
// $form = $search.find('.search-form'),
// $input = $search.find('.search-inputbox'),
// $btn = $search.find('.search-btn'),
// $layer = $search.find('.search-layer');
// // 验证(找到触发事件的dom元素,给他绑定事件)
// // $btn.on('click', function () {
// // console.log(1);
// // 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=1578107456706_294&callback=jsonp295&k=1&area=c2c&bucketid=13&q=' + encodeURIComponent($.trim($input.val()));
// $.ajax({
// url: url,
// dataType: 'jsonp',
// }).done(function (data) {
// console.log(data);
// var html = '',
// dataNum = data['result'].length,
// maxNum = 5;
// 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 () {
// console.log('why always me!');
// });
// });
// $layer.on('click', '.search-layer-item', function () {
// $input.val(removeHtmlTags($(this).html()));
// $form.submit();
// });
// $input.on('focus', function () {
// $layer.show();
// }).on('click', function () {
// return false;
// });
// $(document).on('click', function () {
// $layer.hide();
// });
// function removeHtmlTags(str) {
// return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
// };
// })(jQuery);
输入内容input框没反应 不知道代码哪里出问题了
写回答
3回答
-
同学你好，html是传递过来的参数，是变量，因此不需要添加引号的。只有是字符串的时候添加引号。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
琥珀_2020
提问者
2020-01-05
找到问题了
Search.prototype.appendLayer = function (html) { // this.$layer.html('html'); this.$layer.html(html); this.loaded = !!html; };this.$layer.html('html'); 这里我加了双引号 导致input 输入内容没反应
不过我还想问的是 为什么 我加了 html 双引号 就会导致问题 现在还太明天 有时候 加双引号 有时候又不加双引号
0 -
琥珀_2020
提问者
2020-01-05
应该是search.js出了问题 我把源码的 search.js 粘贴过去 就没问题了
但是不知道我的出哪里问题了 还没找出问题 麻烦各位可爱的老师帮我找找呢QvQ
0
相似问题