功能点:

    输入、下拉选择、根据输入内容模糊检索、键盘上下键选择

  实现思路:

    显示隐藏:

      input获取焦点显示,失去焦点隐藏

    下拉选择:

      以父元素为基准,通过绝对定位定位至input输入下方

    模糊检索:

      监听输入数据的变化,过滤符合要求的数据

    键盘上下选择:

      监听input的键盘事件,判断keycode值,再触发上下键时,动态计算滚动条滚动的距离

    控制事件触发频率,采用函数节流

  具体实现过程:

    节流函数:

 function throttle(func, wait, options) {//函数节流
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
}
}

功能代码:

 xxx.directive('inputAndSelect', function ($timeout) {
return {
restrict: 'AE',
replace: true,
require: 'ngModel',
scope: {
'ngModel': '=',
'data': '@',
'callback': '&'
},
template: '<div class="select-box">' +
' <input type="text" ng-focus="inputOnFocus($event)" ng-blur="inputOnBlur()"' +
' ng-model="ngModel" style="z-index: 10;" class="form-control huowu-input"><span class="arrow-down" style="display:inline-block;width: 12px;height: 8px;right: 14px;' +
' border-left: 6px solid transparent;\n' +
' border-right: 6px solid transparent;\n' +
' border-top: 8px solid #818181;"></span>' +
' <div class="select-box-container" style="z-index: 999;background-color: #fff;" ng-show="showSelect">' +
' <div class="select-box-item" ng-click="selectInputItem(item)" ng-repeat="item in dataList">{{item}}</div></div>' +
'</div>',
link: function(scope, element, attrs) {
//显示/隐藏下拉列表
scope.showSelect = false;
scope.dataList = [];
scope.selectIndex = -1;
var eleInput = element.find('input');
eleInput.attr('id', attrs.id);
//input获取焦点
eleInput.unbind('focus').bind('focus',function() {
scope.showSelect = true;
scope.dataList = JSON.parse(scope.data);
element.find('.select-box-container .select-box-item').removeClass('option-active');
$timeout(function () {
element.find('.select-box-container').scrollTop(0);
}, 0);
if (scope.ngModel) {
scope.dataList = scope.dataList.filter(function(vv) {
return vv.indexOf(scope.ngModel) !== -1;
})
}
if(attrs.callback) {
scope.$parent[attrs.callback]();
}
});
//选择输入项
scope.selectInputItem = function(item) {
scope.ngModel = item;
scope.showSelect = false;
}; //input失去焦点
scope.inputOnBlur = function() {
$timeout(function() {
scope.selectIndex = -1;
scope.showSelect = false;
}, 200)
};
//监听输入数据的变化
scope.$watch('ngModel', function(newVal) {
if(!scope.data) return;
var items = JSON.parse(scope.data);
if (!newVal && typeof newVal === 'string') {
scope.dataList = items;
} else {
scope.dataList = items.filter(function(vv) {
return vv.indexOf(newVal) !== -1;
})
}
});
//监听键盘按下事件
eleInput.unbind('keydown').bind('keydown', throttle(function(e) {
//keycode 38 up 40 down
var items = element.find('.select-box-container .select-box-item');
var $container = element.find('.select-box-container');
var keycode = e.keyCode;
if (keycode === 40) {
//按键向下
scope.selectIndex++;
scope.selectIndex = scope.selectIndex > scope.dataList.length - 1 ? 0 : scope.selectIndex;
} else if (keycode === 38) {
//按键向上
scope.selectIndex--;
scope.selectIndex = scope.selectIndex < 0 ? scope.dataList.length - 1 : scope.selectIndex;
} else if (keycode === 13) {
if (scope.selectIndex !== -1) {
scope.ngModel = scope.dataList[scope.selectIndex];
scope.showSelect = false;
}
element.find('input').blur();
}else {
return;
}
items.removeClass('option-active');
$(items[scope.selectIndex]).addClass('option-active');
if(scope.selectIndex === 0) {
$container.scrollTop(0);
}
$container.scrollTop(scope.selectIndex*25);
}, 50));
}
}
})

   效果图:

  

input模拟输入下拉框的更多相关文章

  1. Chrome浏览器取消INPUT自动记忆下拉框

    项目中有一个搜索框,每次聚焦就会出现如下图自动记忆框,遮挡了项目的搜索列表 差了很多资料想要去掉它,最后发现在input上加上autocomplete="off"就可以了!

  2. 树形下拉框ztree、获取ztree所有父节点,ztree的相关方法

    参考:jQuery树形控件zTree使用小结 需求 添加.修改的终端需要选择组织,组织是多级架构(树状图显示). 思路 1.因为下拉框需要树状图显示,所以排除使用select做下拉框,改用input  ...

  3. 用div,ul,input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  5. input+div 下拉选择框

    前台html页面 <html> <head> <meta name="viewport" content="width=device-wid ...

  6. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  7. 使用jquery-combobox实现select下拉框多选之后,如何将下拉框的值传给input隐藏域

    我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...

  8. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  9. jquery.editable-select 可编辑下拉框之获取select值和input值

    使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-sel ...

随机推荐

  1. Confluence 6 安装 Oracle

    如果你还没有在安装可以连接的 Oracle 数据库,请先下载后进行安装.请参考 Oracle 文档 来获取有关安装的指南. 当你设置你的 Oracle 服务器的时候: 字符集 必须使用 AL32UTF ...

  2. jquery 获取和设置 select下拉框的值

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...

  3. django-admin的源码流程

    一.admin的源码流程 首先可以确定的是:路由关系一定对应一个视图函数 a.当点击运行的时候,会先找到每一个app中的admin.py文件,并执行 b.执行urls.py admin.site是什么 ...

  4. Nginx的核心功能及应用实战

    反向代理功能及配置: 反向代理(Reverse Proxy)方式是指以代理服务器来接受 internet 上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给interne ...

  5. LeetCode(119):杨辉三角 II

    Easy! 题目描述: 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 进阶: ...

  6. 《剑指offer》重建二叉树

    本题来自<剑指offer> 重构二叉树 题目: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2 ...

  7. Nginx详解二:Nginx基础篇之Nginx的优点

    Nginx是一个开源且高性能.可靠的HTTP中间件.代理服务 常见的HTTP服务: HTTPD--Apache基金会 IIIS--微软 GWS--Google(不对外开放) Nginx优势: 一.IO ...

  8. 捷信达会员管理系统SQL语句相关

    捷信达会员管理系统SQL语句相关 USE gshis GO SET ANSI_NULLS, QUOTED_IDENTIFIER ON GO /***************************** ...

  9. C#学习-析构函数

    析构函数用于在类销毁之前释放类实例所使用的托管和非托管资源. 对于C#应用程序所创建的大多数对象,可以依靠.NET Framework的垃圾回收器(GC)来隐式地执行内存管理任务. 但是,若创建封装了 ...

  10. ASP.NET CORE Swagger

    Package 添加并配置Swagger中间件 将Swagger生成器添加到方法中的服务集合中Startup.ConfigureServices: public void ConfigureServi ...