datalist的下拉框输入和光标锁定

一、html5

<button class="btn btn-info " type="button" onclick="remarkList()">
 选择
</button>

input id="remark" class="form-control" type="text" list="remarklist" onclick="dealKeyup(this)">
<datalist id="remarklist" class="list">
</datalist>

二、js

    var dataMap = new Map();
    dataMap.set("type", "1");
    //Map转为Json的方法
    let obj= Object.create(null);
    for (let[k,v] of dataMap) {
        obj[k] = v;
    }
    
    function remarkList(){
    	//alert("处理进来");
    	$.ajax({
			url:BOMF.CONST.WEB_APP_NAME+"/rest/dscommon/RemarkTempletService/preRemarkAll",
			type:"post",
		    dataType:"json",
	        contentType : 'application/json;charset=utf-8',
			async: true,
			data:  JSON.stringify(obj),
			success:function(datas){
				if(datas=="{}"){
					alert('没有查到数据');
				}else{
					$("#remarklist").html("");
					$.each(datas,function(index,itme){ //index相当于下标，item相当于对象，data就是后台传回的一个对象
						//循环遍历数组数据
						var stam="<option value='"+datas[index]+"'>"+datas[index]+"</option>";
						$("#remarklist").append(stam);
						
					});
				}
			},
		});
    }
    
	// 获取光标位置
	function getCursortPosition(ctrl) {
		var CaretPos = 0; // IE Support
		if(document.selection) {
			ctrl.focus();
			var Sel = document.selection.createRange();
			Sel.moveStart('character', -ctrl.value.length);
			CaretPos = Sel.text.length;
		}
		// Firefox support
		else if(ctrl.selectionStart || ctrl.selectionStart == '0')
			CaretPos = ctrl.selectionStart;
		return(CaretPos);
	}
  	
	// 设置光标位置
	function setCaretPosition(ctrl, pos) {
		if(ctrl.setSelectionRange) {		// IE Support
			ctrl.focus();
			ctrl.setSelectionRange(pos, pos);
		}else if(ctrl.createTextRange) {	// Firefox support
			var range = ctrl.createTextRange();
			range.collapse(true);
			range.moveEnd('character', pos);
			range.moveStart('character', pos);
			range.select();
		}
		
	}
	// 光标定位函数
	window.dealKeyup = function (that) {
    	var str = $(that).val();
    	//字符串处理
    	if(str.indexOf("*") != -1){
    		str = str.replace(/\s{1,}/g, "");
    	}
    	str = str.replace(/\*{1,}/g, " ");
    	$("#remark").val(str)
    	//光标定位开始
		var input_val = str.split(' ')[0].length;//截取字符串的长度
		if(input_val != "") {
			setCaretPosition(that,input_val);//光标的定位
			return;
		}
		
	}

三、显示效果