输入框数据的初始化拼装

最新推荐文章于 2022-04-11 17:15:18 发布
最新推荐文章于 2022-04-11 17:15:18 发布
阅读量846 收藏
点赞数
分类专栏： JS相关 文章标签： 输入框数据的初始化拼装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jakeswang/article/details/50580651
版权

页面代码：

#set($pi = "$!request.getParameter('pi')")

#set($ct = "$!request.getParameter('ct')")
#set($ci = "$!request.getParameter('ci')")
#set($bi = "$!request.getParameter('bi')")
#set($bd=$!resTool.getBreedNameById($!bi))
#set($br = "$!request.getParameter('br')")
#set($sp = "$!request.getParameter('sp')")
#set($ml = "$!request.getParameter('ml')")
#if($velocityTool.isStringEmpty($!ci))
    #if($velocityTool.notStringEmpty($!ct))
        #set($ci = $urlTool.toCityId($!ct))
    #else
        #set($ct = $resTool.getCityPinYinByIP($!{request},$!{response}))
        #if($velocityTool.notStringEmpty($!ct))
            #set($ci = $urlTool.toCityId($!ct))
        #end
    #end
#end
#if($velocityTool.isStringEmpty($!{pi}))
    #if($velocityTool.notStringEmpty($!{bi}))
        #set($pi=$!resTool.queryPi($!bi))
    #else
        #set($pi="total")
    #end
#end
#set($onsell = $!timeTool.isDateTime())
#set($marketMap=$!resTool.queryMarketProperties($!request,$!{velocityTool.formatHtml($!{pi})},$!{velocityTool.formatHtml($!bi)}))
#set($cities=$!resTool.getCommonCity())
#set($warehouseMap=$!resTool.queryWarehouseProperties($!request,$!{velocityTool.formatHtml($!{pi})},$!{velocityTool.formatHtml($!ci)}))
#set($pd=$!resTool.getBreedNameById($!{velocityTool.formatHtml($!{pi})}))
#set($cityName=$!resTool.getCityName($!ci))
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>钢材超市-钢材现货资源中心-钢银钢铁现货交易平台</title>
<meta name="description" content="钢银钢材超市具有海量真实现货资源，百家钢厂、贸易商在线直销，钢材价格、钢材库存实时更新，买卖钢材无忧。">
<meta name="keywords" content="钢材超市,今日钢材现货资源,钢材现货,钢材报价,钢材价格,今日钢材，钢材交易,钢材市场,钢材网站，钢铁现货，钢银，钢铁电商">
<link href="//static.banksteel.com/v6/images/fav.ico" rel="shortcut icon">
<link href="//static.banksteel.com/v6/css/chaoshi.css" rel="stylesheet" type="text/css">
<script src="//static.banksteel.com/v6/js/jquery-1.11.3.js"></script>
<script src="//static.banksteel.com/v6/js/lib.js"></script>
<script src="/skin/js/MyNumber.js" type="text/javascript" ></script>
<script src="//static.banksteel.com/v6/js/float_cart.js"></script>
<script src="//static.banksteel.com/v6/js/cart/parabola.js"></script>
<script src="/skin/js/shop/v6/summaryResList.js"></script>
<script src="/skin/js/shop/v6/searchHistory.js"></script>
<script src="/skin/js/shop/v6/singleSelector.js" type="text/javascript" ></script>
<script src="/skin/js/shop/v6/cart.js"></script>
<script src="/skin/js/shop/v6/userInfo.js"></script>
<script type="text/javascript" src="/skin/js/shop/v6/json2.js"></script>
<script src="//static.banksteel.com/v6/js/zhaohuo.js"></script>
<script src="/skin/js/shop/v6/chaoshi.js"></script>
<script type="text/javascript">
var sendFlag ="0";
var searchParams={};
var pa;
pa = getQueryString("kw");
if(pa == null)
{
    pa = "";
}    
var kw=escape(pa);
var ci="$!{ci}";
var pi="$!{pi}";
var pd="$!{pd}"
var br="$!{br}";
var bi="$!{bi}";
var bd="$!{bd}";
var sp="$!{sp}";
var ml="$!{ml}";
var cities = '$!{cities}';
var cityName="$!{cityName}";

$(document).ready(function(){
    $("#cartCountNav").text($("#rcart").text());
    $("#cartCountNav1").text($("#rcart").text());
    
    getUserInfo();
    
    //品名全部设置
    if(document.getElementById("breed_option_all")!=null)
    {
        document.getElementById("breed_option_all").href = "javascript:searchMarket('"+ pi +"');searchParams['breedNames']='';searchParams['breedIds']='';searchParams['breedInfos']='';searchByParams();";
    }
    
    //初始化展示收索记录
    showSearchHistory();
    //判断是否收起或展开
    
    var name ="supermarket_swish";
    var cookieValue = $.cookie(name);
    var number = "2";

    if(cookieValue !="" && typeof(cookieValue) !="undefined")
    {
        number = parseInt(cookieValue);
    }

    if(parseInt(number)%2==0)
    {
        //收索侧边栏
         $(".header-cur-swish .tohide").toggle();
    }
    else{
         $(".screen-slide").show();
    }

    if(pi != "total"){
        searchParams["prBreedId"]=pi;
    }
    if(pi != "total"){
        searchParams["prBreedName"]=pd;
    }
    if(ci!="") {
        searchParams["cityId"]= ci;
        searchParams["cityName"] = cityName;
    }
    if(br!=""){
        searchParams["brands"]=br;
    }
    if(bi!=""){
        searchParams["breesIds"]=bi;
        searchParams["breedNames"]=bd;
        
        var breedInfo = {};
        breedInfo[bi] = bd;
        searchParams["breedInfos"] = breedInfo;
    }
    if(ml!=""){
        searchParams["materials"]=ml;
    }
    if(sp != ""){
        searchParams["specs"]=sp;
    }
    if(kw != ""){
        searchParams["keyword"]=kw;
    }
    
    var breedInfo='$!{marketMap.queryProperty.get($!{pi}).breed_array}';
    var breedData=$.parseJSON(breedInfo.replace(/\n/g,""));
    var materialInfo='$!{marketMap.materialJsonProperty}';
    var materialData=$.parseJSON(materialInfo.replace(/\n/g,""));
    var specInfo='$!{marketMap.specJsonProperty}';
    var specData=$.parseJSON(specInfo.replace(/\n/g,""));
    var brandInfo='$!{marketMap.brandJsonProperty}';
    var brandData=$.parseJSON(brandInfo.replace(/\n/g,""));
    var warehouseInfo='$!{warehouseMap.warehouseJsonProperty}';
    var    warehouseData=$.parseJSON(warehouseInfo.replace(/\n/g,""));

    var defaultBi="";
    var defaultBd="";
     $("#breedSelector").singleSelector("品名", {
        "data" : breedData,
        "defaultValue" : defaultBi,
        "defaultText" : unescape(defaultBd)
    }, "biValue", "bdText",afterSelectBreed,inputEnter,"down1");
    var defaultMl = "";
    $("#materialSelector").singleSelector("材质", {
        "data" : materialData,
        "defaultValue" : defaultMl,
        "defaultText" : unescape(defaultMl)
    }, "mlValue", "mlText",afterSelectOthers,inputEnter,"down2");
    var defaultSp = "";
    $("#specSelector").singleSelector("规格", {
        "data" : specData,
        "defaultValue" : defaultSp,
        "defaultText" : unescape(defaultSp)
    }, "spValue", "spText",afterSelectOthers,inputEnter,"down2");
    var defaultBr = "";
    $("#brandSelector").singleSelector("钢厂", {
        "data" : brandData,
        "defaultValue" : defaultBr,
        "defaultText" : unescape(defaultBr)
    }, "brValue", "brText",afterSelectOthers,inputEnter,"down2");
    var defaultWh = "";
    $("#warehouseSelector").singleSelector("仓库", {
        "data" : warehouseData,
        "defaultValue" : unescape(defaultWh),
        "defaultText" : unescape(defaultWh)
    }, "whValue", "whText",afterSelectOthers,inputEnter,"down1");
    
    searchByParams();
});

function getQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

/**
 *  点击展示收起改变cookie
 */
function changeSwishCookie()
{
    var name ="supermarket_swish";
    var cookieValue = $.cookie(name);
    var value = "1";

    if(cookieValue !="" && typeof(cookieValue)!="undefined")
    {
        var number = parseInt(cookieValue);
         value = number+1;
    }

    $.cookie(name, value, {expires: 30, domain:'.banksteel.com', path: '/'});
}
    
/**
 * 加入购物车v6
 * @param resourceId
 * @param shopId
 * @param channelType
 * @param price
 * @param qty
 * @param averageQty
 */
function addCartv6(resourceId, shopId, channelType, price, qty, averageQty,items,currentObj)
{
    var userId = jQuery.cookie('_login_uid');
    $(".pop-addcart").css("display","none");
    if (!userId)
    {
        alert("请先登录！");
        var url = "http://$velocityTool.getSsoUrl()?mybackurl=http://$velocityTool.getChaoshiUrl()";  //  http://member.banksteel.com/indexcas.jsp?14426_0_1_2800_396
        location.href= url;
    }
    else
    {
        //抛物线效果将资源加入购物车
        goCart(currentObj);
        SetCookiev6('supermarket_cart_'+userId, resourceId, shopId, price, qty, averageQty, items, channelType,currentObj);
    }
}
</script>
</head>
<body class="page-chaoshi">
    <input type="hidden" value="" id="currPageNum">
    <input type="hidden" value="" id="totalPages">
    <input type="hidden" value="" id="totalRows">
    <input type="hidden" value="" id="searchParams">
    <input type="hidden"  value="$onsell" id="onSellValue" />
    <input type="hidden" id="pConditions" />
    <div class="fly_item" id="flyItem">
        <img width="50" height="50" src="//static.banksteel.com/v6/images/flyitem_pic.png">
    </div>
    #parse("/inc/v6/topbar.html")
    #parse("/inc/v6/header_chaoshi.html")
    #parse("/inc/v6/nav.html")
    <div class="wrap-bg">
        <!-- 11111-->
        <div class="header-cur" id="searchCondition">
            <div id="headerSwish" οnclick="changeSwishCookie();" class="header-cur-swish">
                <span class="tohide">收起</span><span class="toshow">展开</span>
            </div>
            <div class="header-cur-count">
                共找到<span id="resCount"></span>条资源
            </div>
            <div class="fl">
                钢材超市 <span id="leftspn" style="display:none" class="n-ico">></span>
            </div>
        </div>
        <div class="div-screen">
            <ul class="tab-bg-subject tab-slider cl">
                <li id="total" #if($!{pi}== "total")class="cur-all cur" #else class="" #end >
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/')">全部</a>
                </li>
                <li id="jiancai" #if($!{pi}== "51")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/jiancai.htm')"><span class="s1"><span class="s2">&#xe600;</span>建筑钢材</span></a>
                </li>
                <li id="rejuan" #if($!{pi}== "52")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/rejuan.htm')"><span class="s1"><span class="s2">&#xe601;</span>热卷</span></a>
                </li>
                <li id="zhonghouban" #if($!{pi}== "53")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/zhonghouban.htm')"><span class="s1"><span class="s2">&#xe602;</span>中厚板</span></a>
                </li>
                <li id="lengjuan" #if($!{pi}== "54")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/lengzha.htm')"><span class="s1"><span class="s2">&#xe603;</span>冷轧涂镀</span></a>
                </li>
                <li id="xinggang" #if($!{pi}== "55")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/xinggang.htm')"><span class="s1"><span class="s2">&#xe609;</span>型钢</span></a>
                </li>
                <li id="guancia" #if($!{pi}== "56")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/guancai.htm')"><span class="s1"><span class="s2">&#xe605;</span>管材</span></a>
                </li>
                <li id="youtegang" #if($!{pi}== "57")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/youte.htm')"><span class="s1"><span class="s2">&#xe606;</span>优特钢</span></a>
                </li>
                <li id="daigang" #if($!{pi}== "58")class="cur" #end>
                    <a href="javascript:void(0)" οnclick="redirect('http://chaoshi.banksteel.com/daigang.htm')"><span class="s1"><span class="s2">&#xe604;</span>带钢</span></a>
                </li>
            </ul>
            <div class="tab-subject-line">
                <span class="line"></span><i></i>
            </div>
            <div class="screen-slide" style="display:none">
                #parse("/shop/market/v6/search/search.html")
            </div>
        </div>
        <!-- 11111-->
         <div class="search-box-recommend search-inp cl">
            <ul class="f-cb">
                <li class="f-fl" id="breedSelector"></li>
                <li class="f-fl" id="specSelector"></li>
                <li class="f-fl" id="materialSelector"></li>
                <li class="f-fl" id="brandSelector"></li>
                <li class="f-fl search-inp-ck" id="warehouseSelector"></li>
                <li class="f-fl">厚度<input type="text" class="inp2" οnkeydοwn="inputEnter();" id="ts1" name="ts1" value="" οnkeyup="if(!this.value.match(/^\d*?\.?\d*?$/))this.value='';else this.value=this.value;if(this.value.match(/^\d*?\.?\d*?$/))this.value=this.value;" autocomplete="off">-<input type="text" class="inp3" id="ts2" οnkeydοwn="inputEnter();" name="ts2" value="" οnkeyup="if(!this.value.match(/^\d*?\.?\d*?$/)) this.value='';else this.value=this.value;if(this.value.match(/^\d*?\.?\d*?$/)) this.value=this.value" autocomplete="off"></li>
                <li class="f-fl">宽度<input type="text" class="inp2"  οnkeydοwn="inputEnter();" id="wi1" name="wi1" value="" οnkeyup="if(!this.value.match(/^\d*?\.?\d*?$/))this.value='';else this.value=this.value;if(this.value.match(/^\d*?\.?\d*?$/)) this.value=this.value" autocomplete="off">-<input type="text" class="inp3" id="wi2" οnkeydοwn="inputEnter();" name="wi2" value="" οnkeyup="if(!this.value.match(/^\d*?\.?\d*?$/)) this.value='';else this.value=this.value;if(this.value.match(/^\d*?\.?\d*?$/)) this.value=this.value" autocomplete="off"></li>
                <li class="f-fl"><a class="a1" href="javascript:void(0)" οnclick="buttonSearch()">搜索</a></li>
            </ul>
        </div>
        <div class="search-box-recommend search-box-btn cl">
            <div class="fr-opentime">
                <div class="btn-leftarrow" οnclick="prePage()"></div>
                <div class="btn-middlearrow f-fl" id="middlearrow_btn"></div>
                <div class="btn-rightarrow" οnclick="nextPage()"></div>
            </div>

            <div class="sortline">
                <ul>
                    <li οnclick="searchByParams()">默认</li>
                    <li id="sortPrice" class="default" οnclick="sortPrice()" class="default">价格</li>
                </ul>
            </div>
            <div class="search-line"></div>
            <div class="search-null"></div>
            <div class="price-box">
                <div>
                <input type="text" id="pr1" class="inputs" value="￥最低价" οnfοcus="script:if(this.value=='￥最低价'){this.value='';}" οnkeyup="if(!this.value.match(/^\d*?\.?\d*?$/))this.value='';else this.value=this.value;if(this.value.match(/^\d*?\.?\d*?$/))this.value=this.value;" οnblur="script:if(this.value==''){this.value='￥最低价';}">
                    <span class="price-line">-</span> <input type="text" value="￥最高价" id="pr2" class="inputs" οnblur="script:if(this.value==''){this.value='￥最高价';}"
                        οnkeyup="if(!this.value.match(/^\d*?\.?\d*?$/))this.value='';else this.value=this.value;if(this.value.match(/^\d*?\.?\d*?$/))this.value=this.value;"    οnfοcus="script:if(this.value=='￥最高价'){this.value='';}">
                </div>
                <div>
                    <button type="button" class="btn-clear" οnclick="clean()">清空</button>
                    <button type="button" class="btn-buy" οnclick="buttonSearch()">确定</button>
                </div>

            </div>
            <div class="search-line"></div>
            <ul class="line">
                <li>
                    <div class="show-pop pop-cangku" id="" style="display: none;">
                        <ul class="col cl city" id="col-city">
                        <li><a id="0101" href="javascript:void(0)" οnclick="searchByCity(this);">上海</a></li>
                            <li><a id="0201" href="javascript:void(0)" οnclick="searchByCity(this);">南京</a></li>
                            <li><a id="0202" href="javascript:void(0)" οnclick="searchByCity(this);">苏州</a></li>
                            <li><a id="0204" href="javascript:void(0)" οnclick="searchByCity(this);">张家港</a></li>
                            <li><a id="0205" href="javascript:void(0)" οnclick="searchByCity(this);">无锡</a></li>
                            <li><a id="0206" href="javascript:void(0)" οnclick="searchByCity(this);">江阴</a></li>
                            <li><a id="0207" href="javascript:void(0)" οnclick="searchByCity(this);">宜兴</a></li>
                            <li><a id="0211" href="javascript:void(0)" οnclick="searchByCity(this);">扬州</a></li>
                            <li><a id="0214" href="javascript:void(0)" οnclick="searchByCity(this);">徐州</a></li>
                            <li><a id="0215" href="javascript:void(0)" οnclick="searchByCity(this);">连云港</a></li>
                            <li><a id="0301" href="javascript:void(0)" οnclick="searchByCity(this);">杭州</a></li>
                            <li><a id="0302" href="javascript:void(0)" οnclick="searchByCity(this);" >宁波</a></li>
                            <li><a id="0303" href="javascript:void(0)" οnclick="searchByCity(this);">温州</a></li>
                            <li><a id="0304" href="javascript:void(0)" οnclick="searchByCity(this);">嘉兴</a></li>
                            <li><a id="0307" href="javascript:void(0)" οnclick="searchByCity(this);">金华</a></li>
                            <li><a id="0401" href="javascript:void(0)" οnclick="searchByCity(this);">广州</a></li>
                            <li><a id="0402" href="javascript:void(0)" οnclick="searchByCity(this);">深圳</a></li>
                            <li><a id="0403" href="javascript:void(0)" οnclick="searchByCity(this);">佛山</a></li>
                            <li><a id="0404" href="javascript:void(0)" οnclick="searchByCity(this);">乐从</a></li>
                            <li><a id="0501" href="javascript:void(0)" οnclick="searchByCity(this);">西安</a></li>
                            <li><a id="0601" href="javascript:void(0)" οnclick="searchByCity(this);">天津</a></li>
                            <li><a id="0701" href="javascript:void(0)" οnclick="searchByCity(this);">唐山</a></li>
                            <li><a id="0703" href="javascript:void(0)" οnclick="searchByCity(this);">邯郸</a></li>
                            <li><a id="0902" href="javascript:void(0)" οnclick="searchByCity(this);">青岛</a></li>
                            <li><a id="1101" href="javascript:void(0)" οnclick="searchByCity(this);">郑州</a></li>
                            <li><a id="1204" href="javascript:void(0)" οnclick="searchByCity(this);">太原</a></li>
                            <li><a id="1301" href="javascript:void(0)" οnclick="searchByCity(this);" >武汉</a></li>
                            <li><a id="1502" href="javascript:void(0)" οnclick="searchByCity(this);" >合肥</a></li>
                            <li><a id="1902" href="javascript:void(0)" οnclick="searchByCity(this);">南昌</a></li>
                            <li><a id="2402" href="javascript:void(0)" οnclick="searchByCity(this);">成都</a></li>
                            <li><a id="2101" href="javascript:void(0)" οnclick="searchByCity(this);">重庆</a></li>
                            <li><a id="quanguo" href="javascript:void(0)" οnclick="searchByCity(this);">全国</a></li>
                        </ul>
                    </div> <span class="selects">交货地 ：$!resTool.getCityName($!ci)</span>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="auto">
                <div class="pop-tradetime" style="display: none;">
                    <div class="pop-tradetime-arrow"></div>
                    <div class="pop-tradetime-col">
                        <div class="tcon">现在是非交易时间，无法下单</div>
                        <div class="t">交易时间：工作日8:30-17:00</div>
                    </div>
                </div>
                <div class="pop-problem" style="display: none; top: 68px;">
                    <div class="pop-tradetime-arrow"></div>
                    <div class="pop-tradetime-col">
                        <div class="tcon">您所购买的量已超出最大购买量</div>
                        <div class="pop-addcart-operate">
                            <input type="button" name="" class="btn-js" value="去结算"> <input type="button" name="" class="btn-gobuy" value="继续购物">
                        </div>
                    </div>
                </div>
            </div>
            #parse("/shop/market/v6/resList.html")
            #parse("/inc/v6/page.html")
        </div>
    </div>
#parse("/inc/v6/footer.html")
#parse("/inc/v6/float_cart.html")
</body>

</html>

singleton初始化插件

(function($) {
    $.fn.singleSelector = function(title, options, valueFieldId, textFieldId,
            afterSelect, inputEn,downCss) {
        $(document).on('click', function() {
            $("div[class='search-box-down"+ downCss + "']").css("display", "none");
        });
        $(this).empty();
        init(this, title, options, valueFieldId, textFieldId, afterSelect,
                inputEn,downCss);
    };
    function init(container, title, options, valueFieldId, textFieldId,
            afterSelect, inputEn,downCss) {

        var inpuCss ="inp1";

        if(downCss=="down2")
        {
          inpuCss ="inp4";
        }
        
        if (options != null) {
            this.data = options["data"];
            var defaultValue = "";
            var defaultText = "";
            if (options["defaultValue"] != null) {
                defaultValue = options["defaultValue"];
            }
            if (options["defaultText"] != null) {
                defaultText = options["defaultText"];
            } else {
                defaultText = defaultValue;
            }
            this.afterSelect = afterSelect;
            this.div = $("<div style='display: none;' class='search-box-down "+ downCss +"'></div>");
            this.valueField = $("<input type='hidden' id='" + valueFieldId
                    + "' name='" + valueFieldId + "' value='" + defaultValue
                    + "'/>");
            this.textField = $("<input type='text' id='" + textFieldId
                    + "' name='" + textFieldId + "' value='" + defaultText
                    + "' class='"+inpuCss + "'autocomplete='off'/>");
            this.textField.bind("click", {
                "div" : this.div
            }, function(event) {
                $("div[class='search-box-down"+ downCss +"']").css("display", "none");
                // 阻止事件冒泡
                event.stopPropagation();
                // 如果search-box-down 里面没有东西 则没有下来框
                if ($(event.data.div).find("a").length != 0) {
                    toggleDiv(event.data.div);
                }
            });
            if (this.data != null) {
                
                for (var i = 0; i < this.data.length; i++) {
                    if(i>5) { break; }
                    var option = this.data[i];
                    var value = "";
                    var text = "";
                    if (option["value"] != null) {
                        value = option["value"];
                    }
                    if (option["text"] != null) {
                        text = option["text"];
                    } else {
                        text = value;
                    }

                    var optionA = $("<a value='" + value + "' text='" + text
                            + "'>" + text + "</a>");
                    optionA.bind("click", {
                        "valueField" : this.valueField,
                        "textField" : this.textField,
                        "value" : value,
                        "text" : text,
                        "div" : this.div,
                        "afterSelect" : this.afterSelect
                    }, function(event) { // 阻止事件冒泡 event.stopPropagation();
                        selectItem(event["data"]["valueField"],
                                event["data"]["textField"],
                                event["data"]["value"], event["data"]["text"],
                                event["data"]["div"],
                                event["data"]["afterSelect"]);
                    });

                    this.div.append(optionA);
                }
            }

            this.textField.bind("keyup", {
                "option" : this.data,
                "textField" : this.textField,
                "valueField" : this.valueField,
                "div" : this.div,
                "afterSelect" : this.afterSelect
            }, function(event) {
                filter(event.data.option, event.data.textField,
                        event.data.valueField, event.data.div,
                        event.data.afterSelect);
            });

            this.textField.bind("keydown", {
                "option" : this.data,
                "textField" : this.textField,
                "valueField" : this.valueField,
                "div" : this.div,
                "afterSelect" : this.afterSelect,
                "inputEn" : inputEn
            }, function(event) {
    
                var clickEnter=event["data"]["inputEn"];

                try {
                    if (clickEnter && typeof (clickEnter) == "function") {
                        
                        clickEnter(textField, valueField);
                    } else {
                    }
                } catch (e) {
                }
            });

            this.div.mouseleave(function() {
                $("div[class='search-box-down"+ downCss +"']").css("display", "none");
            });
            $(container).append(title);
            $(container).append(this.textField);
            $(container).append(this.valueField);
            $(container).append(this.div);
        }
    }

    function toggleDiv(div) {
        div.toggle();
    }

    function selectItem(valueField, textField, value, text, div, afterSelect) {
        valueField.val(value);
        textField.val(text);
        div.hide();
        try {
            if (afterSelect && typeof (afterSelect) == "function") {
                afterSelect(value, text);
            } else {
            }
        } catch (e) {
        }

    }

    function filter(options, textField, valueField, div, afterSelect) {
        valueField.val("");
        div.empty();
        var text = textField.val();
        if (text != null) {
            text = text.toLowerCase();
        } else {
            text = "";
        }
        for (var i = 0; i < options.length; i++) {
            if(i>5) { break; }
            var option = options[i];
            for ( var key in option) {
                var content = option[key];
                if (content != null) {
                    content = content.toLowerCase();
                    if (content.indexOf(text) >= 0 || text == "") {

                        var optionA = $("<a value='" + option["value"]
                                + "' text='" + option["text"] + "'>"
                                + option["text"] + "</a>");
                        optionA.bind("click", {
                            "valueField" : valueField,
                            "textField" : textField,
                            "value" : option["value"],
                            "text" : option["text"],
                            "div" : div,
                            "afterSelect" : afterSelect
                        }, function(event) {
                            event.stopPropagation(); // 阻止事件冒泡
                            selectItem(event["data"]["valueField"],
                                    event["data"]["textField"],
                                    event["data"]["value"],
                                    event["data"]["text"],
                                    event["data"]["div"],
                                    event["data"]["afterSelect"]);
                        });
                        div.append(optionA);
                        if(i>5) { break; }
                        break;
                    }
                }
            }
        }
    }
})(jQuery);

jakeswang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现input的赋值，val()方法无法赋值问题
马句
08-16 3万+
input框赋值 如下所示，是一个文本框的html代码，实际开发中，要涉及到将数据库中的数据取出然后放入input框中。 &lt;input id="name1" name="teacherName" type="text" /&gt;​​​​​​​ 通过以下js代码可以实现对input文本框进行赋值，以下方法分别针对不同的情况，但是前两种是通用的 $('#name1').v...
input输入框js处理汇总【转载】
phdbrianlee的专栏
09-18 2405
javascritp实现input输入框相关限制用法  1.取消按钮按下时的虚线框  　　在input里添加属性值 hideFocus 或者 HideFocus=true  2.只读文本框内容  在input里添加属性值 readonly  3.防止退后清空的TEXT文档(可把style内容做做为类引用)  　　  4.ENTER键可以让光标移到下一个输入框  　　  5.只能为中文(有闪动)
原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值
u010234868的专栏
06-09 3957
<input type="text" value="请输入关键字" class="gray" id="txtInput"> // 文本框中有灰色字体的“请输入关键字”提示，获取焦点时，清空文本框，输入的字体显示为黑色，当文本框为空失去焦点时，显示默认提示文字 // 1. 获取元素 var txtInput = document.getElementById('txtInput'); // 2. 注册获取焦点事件 txtInput.onfocus = function () { if (txt
IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）
qssn的博客
08-02 2655
在React项目中碰到了个问题，输入框绑定了input事件，在IE中初始化会自动执行，刚开始以为是只要有placeholder就会导致问题，后面网上搜了一轮，自己手撸了一下，总结了导致绑定的input事件自动执行的原因 1.输入框的值为空，2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变；还有就是input获得焦点时和失去焦点时，也会改变；但是改变前后...
js实现input的赋值
热门推荐
wilson_m的博客
03-10 19万+
input框赋值 如下所示，是一个文本框的html代码，实际开发中，要涉及到将数据库中的数据取出然后放入input框中。 &lt;input id="name1" name="teacherName" type="text" /&gt; 通过以下js代码可以实现对input文本框进行赋值，以下方法分别针对不同的情况，但是前两种是通用的。 $('#nam...
javascript 清除输入框中的数据
10-30
清楚输入框中的数据实现代码。
jQuery Mask Plugin输入框内容格式化插件
06-10
一个用于字段格式的jQuery Mask Plugin输入框内容格式化插件，文本框内容格式化代码，支持日期格式，手机号码，时间格式（小时），带区号的座机号码，美国号码，地区号码，混合类型，邮政编码，货币等文字格式化。
用javascript实现的激活输入框后隐藏初始内容
10-30
在网页设计中，有时我们希望在用户聚焦(input框获得焦点)时隐藏输入框的初始提示文字，当用户离开(input框失去焦点)时恢复这些提示。这可以提高用户体验，因为初始内容不再遮挡用户视线，而当用户需要时又能提供清晰...
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ‘1888888888’; 这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”...
微信小程序使用form表单获取输入框数据的实例代码
08-27
本实例主要讲解如何通过form表单获取输入框（input）中的数据，并提供了具体的代码示例。以下将详细介绍整个过程： 1. **效果展示** 在微信小程序中，一个简单的登录界面可以包含两个输入框，分别用于输入用户名和...
js向input的value赋值
NULL
04-17 17万+
 js与jquery:在我印象里面都是一样的,今天利用空闲的时间来总结一下,js与jquery究竟有什么区别?  js : 是一门网页的脚本语言 jquery :jquery是基于js的一种框架,也就是说 jquery 就对 js 的一个扩展，封装，就是让javascript更好用，更简单，jquery就是要用更少的代码，漂亮的完成更多的功能。   文本框如下 &lt;input t...
使用js代码修改input的默认值
psjasf1314的博客
04-11 3850
内容：使用js代码来对input设置的默认值进行修改，点击按钮修改input的默认值 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function f() { var v1 = document.getEle
js input 赋值失效
野生码农
10-04 5193
//这段代码，有时候赋值失效，是什么原因？ $("#name_input").attr("value", dataObj.name); 使用这个方法 $("＃id").val("xxx") attr只改变属性，不改变显式value。改变属性之后，还需要setAttr才能使得生效。 TODO 1，如果直接调用setAttr呢？ 2，setAttribute，提示不是函数？ ...
input 日期选择器中设置初始值
yaomengzhi的博客
12-05 1万+
1、html标签中定义dom元素   type="date" id="startDate"> 2、编写JS代码   document.getElementById('startDate').valueAsDate=new Date();
input输入框样式初始化
最新发布
05-31
你可以使用CSS来设置输入框的样式。以下是一个简单的示例，演示如何将输入框的背景色设置为灰色，文本颜色设置为白色，边框样式设置为实线，边框颜色设置为黑色，并且设置边框圆角： ```html <style> input[type="text"] { background-color: #ccc; color: #fff; border: 1px solid #000; border-radius: 5px; padding: 5px; } </style> <input type="text" value="Hello World"> ``` 在这个样式规则中，我们使用了属性选择器来选中所有类型为"text"的输入框，然后设置了它们的背景色、文本颜色、边框样式、边框颜色、边框圆角和内边距。你可以根据需要调整这些属性的值，来自定义输入框的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值