查詢下拉框案例，代替datalist對象。

代碼

html：

<input class="searchInput" itemIndex="{{$index}}" placeholder="請輸入搜索關鍵字" type="text" value="">

<div id="dataDownListOutDiv">
    <div class="dataDownList" ng-repeat='pl in PointList track by $index'
         itemIndex="{{$index}}" tabindex="{{$index}}" ng-click="">
        {{pl.name}}
    </div>
</div>

css：

#dataDownListOutDiv{
	background-color: #f3f8ff;
	min-width:2px;
	min-height: 1px;
	z-index: 999999;
	position: absolute;
}

#dataDownListOutDiv .active{
	background-color: #b8daff;
}

js：

/**
 * 構造對象
 */
var sdl = new searchDownList(inputChangeCallBack,itemClickCallBack,".searchInput","#dataDownListOutDiv",".dataDownList","itemIndex");
/**
 * 調用input的初始化方法
 */
sdl.searchInputInit();

/**
 * input值改變
 */
var inputChangeCallBack=function(inputObj){
    $scope.PointList=new Array();
    $scope.$apply();
    $scope.PointList=[
        {id:"1",name:"知識點一"},
        {id:"2",name:"知識點二"}
    ];
    $scope.$apply();

    //調用下拉列表的初始化方法
    sdl.downListInit();
}

/**
 * item被選中
 * @param inputObj
 */
var itemClickCallBack = function(itemObj){
    console.log(itemObj.html());
    console.log("選中item");
}

 

/**
 * 搜索下拉框對象
 * @param searchInputId
 */
function searchDownList(inputChangeCallBack, itemClickCallBack, searchInputId, downListOutDivId, downListItemClass, itemIndexName){
    /**
     * 下拉列表中當前所在的itemIndex
     * @type {number}
     */
    this.currentDownListIndex = 0;
    /**
     * input的keyup回調函數（keyup當作input改變值了）
     */
    this.inputChangeCallBack = inputChangeCallBack;
    /**
     * 下拉列表item選中回調函數
     */
    this.itemClickCallBack = itemClickCallBack;
    /**
     * input的ID
     */
    this.searchInputId = searchInputId;
    /**
     * 下拉列表外層div的Id
     */
    this.downListOutDivId = downListOutDivId;
    /**
     * 下拉列表item的class
     */
    this.downListItemClass = downListItemClass;
    /**
     * 下拉列表item的index名稱
     */
    this.itemIndexName = itemIndexName;
    let sdl = this;

    /**
     * input 初始化事件
     * 爲所有的input綁定keyup事件
     * @param callBackFun
     */
    this.searchInputInit = function(){
        //按鍵彈起
        $(sdl.searchInputId).keyup(function(ev){
            var oEvent=ev||event;
            var eCode = oEvent.keyCode;
            console.log("按下鍵值："+eCode);

            if (eCode == 40){
                //下鍵
                sdl.itemUpDown();
            }else if (eCode == 13){
                //回車
                var itemIndex =  Number($(this).attr(sdl.itemIndexName));
                enter(itemIndex);
            }else{
                //其他按鍵
                sdl.searchInputChange($(this));
            }
        })
    };
    /**
     * input 改變事件
     * @param inputObj
     * @param callBackFun
     */
    this.searchInputChange = function(inputObj){
        //將下拉列表的index改爲0
        sdl.currentDownListIndex = 0;

        var val = inputObj.val();
        var top = inputObj.offset().top;
        var left = inputObj.offset().left;
        console.log("input:"+val);

        if (val == null | val =='') {
            $(sdl.downListOutDivId).hide();
            return;
        }
        $(sdl.downListOutDivId).show();
        $(sdl.downListOutDivId).offset({top:top+30,left:left});
        //回調函數
        sdl.inputChangeCallBack(inputObj);
    };
    /**
     * item 初始化事件
     */
    this.downListInit = function () {
        console.log("下拉列表擊發事件綁定");
        $(sdl.downListItemClass).keyup(function(ev){
            var oEvent=ev||event;
            var eCode = oEvent.keyCode;
            var itemIndex =  Number($(this).attr(sdl.itemIndexName));
            if (eCode == 38){
                //向上
                sdl.currentDownListIndex = itemIndex-1;
                sdl.itemUpDown();
            }else if (eCode == 40){
                //向下
                sdl.currentDownListIndex = itemIndex+1;
                sdl.itemUpDown();
            }else if (eCode == 13){
                //回車
                sdl.currentDownListIndex = itemIndex;
                sdl.itemEnter($(this));
            }
        })
    };
    /**
     * item 上下移動事件
     */
    this.itemUpDown = function(){
        $(sdl.downListItemClass).each(function(){
            var itemIndex =  Number($(this).attr(sdl.itemIndexName));
            //$(this).css("background-color","#eee");
            $(this).removeClass("active");
            if (itemIndex == sdl.currentDownListIndex) {
                $(this).focus();
                //$(this).css("background-color","#b8daff");
                $(this).addClass("active");
            }
        })
    };
    /**
     * item 選中事件
     * @constructor
     */
    this.itemEnter = function(itemObj){
        sdl.itemClickCallBack(itemObj);
    }

}