<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs下拉搜索框</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
input,select{
width: 120px;
}
</style>
</head>
<body>
<div ng-app="app" ng-controller="indexCtrl">
<input type="text" ng-change="searchTextValueChange(searchTextValue)" ng-model="searchTextValue" ng-click="searchTextInputClick()">
<div ng-show="showSelect">
<select ng-model="selectValues" multiple>
<option ng-repeat="data in selectData" ng-click="selectOptionClick(data)">{{data}}</option>
</select>
</div>
</div>
<script>
var app = angular.module("app",[]);
app.controller("indexCtrl", function ($scope) {
$scope.selectData = ["王小明","李晓红","长着长着","你是狗么","别问,问就幸福","今天又被幸福了","快乐快乐","蛇皮狗"];
//下拉框中的数值拷贝一份
$scope.copySelectData = $scope.selectData;
//是否显示下拉框
$scope.showSelect = false;
//文本框值
$scope.searchTextValue = "";
$scope.selectValues = []; /**
* 将下拉选的数据值赋值给文本框,并且隐藏下拉框
*/
$scope.selectOptionClick = function (selectValue) {
//因为加了多选属性防止多选点击置空数组再加数据 //不加multiple多选属性不现实下拉范围
$scope.selectValues = [];
$scope.selectValues.push(selectValue);
$scope.showSelect = false; //下拉框隐藏
$scope.searchTextValue = $scope.selectValues[0]; //文本框中的值 };
/**
* 获取的数据值与下拉选逐个比较,如果包含则放在临时变量副本,并用临时变量副本替换下拉选原先的数值,如果数据为空或找不到,就用初始下拉选项副本替换
*/
$scope.searchTextValueChange = function (searchTextValue) {
if(searchTextValue === "" || searchTextValue === undefined){
$scope.selectData = $scope.copySelectData;
return;
}
//正则匹配,不是中文不筛选数据
if(new RegExp("[^\\u4E00-\\u9FA5]+").test(searchTextValue)){
return;
}
var newData = []; //创建一个临时下拉框副本
angular.forEach($scope.selectData, function (data) {
if (data.indexOf(searchTextValue)>=0){
newData.push(data);
}
});
$scope.selectData = newData; //newData中的数值赋值给$scope.selectData
};
/**
* 搜索输入框点击事件
*/
$scope.searchTextInputClick = function () {
if($scope.selectData.length>1){
$scope.showSelect = true;
}
};
})
</script>
</body>
</html>

angularjs select下拉搜索框的更多相关文章

  1. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  2. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  3. [jQueryUI] – Chosen:select下拉选择框美化插件及问题

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  4. WeChat-SmallProgram:自定义select下拉选项框组件

    1):创建组件所需的文件 2):自定义组件 CSS 及 JS 组件的wxml: <view class='com-selectBox'> <view class='com-sCont ...

  5. 类似select下拉选择框同时又支持手动输入的元素 datalist 介绍。

    有时候我们会有这样的需求,通过使用下拉菜单给用户一定的选择范围,同时又可以使用户在找不到选择项的时候手动输入.这个时候我们就需要用到html5的datalist属性了. datalist包含<o ...

  6. select下拉选框的默认值,包括每次进入页面的默认值

    下拉选: <select onchange="selectTotal(this.value)" style="width: 50px;">      ...

  7. angularJS select下拉框检测改变

    html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...

  8. DOM操作表单(select下拉选框)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. jsp页面数据回显(select下拉选择框)

    1.静态变量方式: <!-- 实现select标签回显 --> 1.<select name="curStatus" value="${curStatu ...

随机推荐

  1. WinForm-SuspendLayout、ResumeLayout、PerformLayou——转载

    WinForm-SuspendLayout.ResumeLayout.PerformLayou——转载 https://www.cnblogs.com/si-shaohua/archive/2011/ ...

  2. DataGridView 直接修改数据操作

    DataGridView单元格进入编辑模式的方法: 双击或者f2: EditCellOnEnter 属性设为True,对DataGridView进行配置,当用户移动到该单元格后,该单元格可立即切换到编 ...

  3. WPF的MediaElement指定Source无法播放问题解决

    最近学wpf,在使用 MediaElement 指定 Source 进行视频播放时,在源码界面可以正常显示,但运行时控件显示空白. 源码界面如下图:(可正常显示) 运行后如下图所示:(控件位置显示空白 ...

  4. 标准Trie字典树学习一:原理解析

    特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! 系列文章: 1. 字典树Trie学习一:原理解析 2.字典树Tr ...

  5. 使用重绘项美化WinForm中的控件

    如果你觉得项目中的ComboBox.ListBox或其它的Winforms控件不能满足你的显示要求,包括窗体在内很多控件都支持重绘修改显示样式.下面的示例完成对ComBox数据项的重绘,希望能起到抛砖 ...

  6. 八、window搭建spark + IDEA开发环境

    本文将简单搭建一个spark的开发环境,如下: 1)操作系统:window os 2)IDEA开发工具以及scala插件(IDEA和插件版本要对应): 2-1)IDEA2018.2.1:https:/ ...

  7. 新建Java Web项目

    1.MyEclipse的菜单栏--File--Web Project,新建一个web工程 Project name 填上自己的项目名称,例如HelloWorld. 需要选择Java EE版本以及Tar ...

  8. C#学习笔记-中英文切换(XML)

    这几天因为软件需要加英文版本,所以查了好久的资料找到了相关的信息,原资料参考:http://blog.csdn.net/softimite_zifeng 上网查的中英文切换大约有两种方式:1.动态加载 ...

  9. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  10. linq返回的IEnumerable<T>泛型不能被列举计算大于1次

    在分页获取Take后面加ToList()方法就能得到正确结果,为什么?