<!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. [javaSE] GUI（鼠标事件）

    调用Button对象的addMouseListener方法,参数:MouseListener对象,这个类是个接口,需要实现以下方法 mouseClicked mousePressed mouseRel ...

  2. 【SSH网上商城项目实战23】完成在线支付功能

     转自: https://blog.csdn.net/eson_15/article/details/51464415 上一节我们做好了支付页面的显示,从上一节支付页面显示的jsp代码中可以看出,当用 ...

  3. 理解webpack4.splitChunks

    一.前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的,现在正好有时间打算好好了解一下,看了官方文档也陆陆续续的看了看网上别人写的文章,感觉大部分都是将官方文档翻译了一遍,很多问题 ...

  4. CSS3之word-wrap英文单词溢出强制换行

    语法 word-wrap: normal|break-word; 所有主流浏览器都支持 word-wrap 属性. <div style="border:1px #f00 solid; ...

  5. <Android Framework 之路> N版本 Framework Camera的一些改动

    前言 Android N版本最近发布,Nougat是否好吃,不得而知,慢慢看下~ 感谢AndroidXref这个网站,给开发者提供了大量的便捷~以后学习Android就靠它了. N版本上Framewo ...

  6. LeetCode赛题393----UTF-8 Validation

    393. UTF-8 Validation A character in UTF8 can be from 1 to 4 bytes long, subjected to the following ...

  7. Node.js 优雅地自动审核团队的代码

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 简介 在团队开发中,无论是写前端(js,css,htm ...

  8. AutoCAD LoadLibrary Failed with error 126 Message

    LoadLibrary Failed with error 126 Message BY C3DISH ON 26 MAY, 2013 · ADD COMMENT I wanted to post a ...

  9. Angular1.x 基础总结

    官方文档:Guide to AngularJS Documentation   w3shools    angularjs教程  wiki   <AngularJS权威教程> Introd ...

  10. 微信小程序 - 弹出键盘遮挡住输入框

    在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...