<!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. jQuery 数据 - jQuery.data() 方法

    打印出 hi

  2. 打印插件--PAZU

    PAZU对打印控制实现了: 2.1 设置页眉页脚 2.2 指定纸张大小 2.3 设置纸张方向 2.4 设置页边距 2.5 选择指定的打印机 2.6 无需用户确认,JS直接调用打印预览 2.7 无需用户 ...

  3. C++类数组的实现

    请看下面的代码: //xy_3_1 2013/10/26 #include<stdio.h> #include<iostream.h> #include<string.h ...

  4. 在 Azure Web 应用中创建 .NET 应用程序

    本快速入门帮助你在数分钟内将你的第一个 ASP.NET Web 应用部署到 Azure 应用服务.完成本教程后,你将能够在云中启动并运行一个简单的 Web 应用.在本教程中完成的所有操作均符合1 元试 ...

  5. Groovy中的操作符重载

    操作者 方法 a + b a.plus(b)中 a - b a.minus(b)中 a * b a.multiply(b)中 a ** b a.power(b)中 a / b a.div(b)中 a ...

  6. poj 3104 dring 二分

    Drying Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7684   Accepted: 1967 Descriptio ...

  7. javaweb浏览器url上项目名称的更改

    如何改变上面url项目名称地址,如把04去掉改成teachershare 如下图:在项目设置中设置web context-root属性,将04去掉. 就可以用这个登录了. 要注意的是如果之前已经部署在 ...

  8. K：顺序表和链表的比较

     顺序表和链表是线性表的两种基本实现形式(链表还有多种变化形式),对于这两种实现方式,没有一种方法可以称是最好的,他们各自有着各自的特点和优缺点,适用于不同的应用场景.  与顺序表相比,链表较为灵活, ...

  9. 浏览器根对象window之窗体和工具条

    1. 窗体和工具条 1.1 窗体 frames.self.window.parent.top.opener. frames 数组类型,页面中iframe的引用,如果页面有2个iframe,则frame ...

  10. CSS核心内容：层叠和继承

    实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...