u012503756
bulidfer
2018-07-24 01:32
采纳率: 35.3%
浏览 525

求一个js控件模板 数据库有内容 查询后添加成小标签的形式

下拉框的牛肉相关的食材 是 提前录入到数据库的 只要搜索牛肉 模糊查询相关的都会出来

显示状态:

图片说明

添加状态:
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • showbo
    已采纳

    用select2就行了,支持搜索,多选,多选效果就和你的那张图一样

    还可以扩张select2,添加自己输入的内容到备选内容中,参考

    select2动态添加选项

    点赞 评论
  • lzm251697785
    lzm251697785 2018-07-24 02:47

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    编辑框下拉列表演示




    <br> $(document).ready(function(){init();});<br>


                <tr><td nowrap rowspan=10></td><td height=8></td></tr>
                <tr><td> E-mail</td><td><input id="s_custemail" name='email' value='' AutoComplete="off" size=60 maxlength=256></td></tr>
                <tr><td> 姓名</td><td><input id="s_custname" value=""  AutoComplete="off" size=60 maxlength=256></td></tr>
                <tr><td> 单位</td><td><input name='unit' value="" size=60 maxlength=256 ></td></tr>
                <tr><td> 部门</td><td><input name='part' value="" size=60 maxlength=256 ></td></tr>
                <tr><td> </td><td> </td></tr>
    
    
        </table>
    
        <div id="listEmail" style="display:none">
            <ul>
                <li>liu2yi1@test.com</li>
                <li>liu2er4@test.com</li>
                <li>liu2san1@test.com</li>
                <li>chen2yi1@test.com</li>
                <li>chen2er4@test.com</li>
                <li>chen2san1@test.com</li>
                <li>zhang1yi1@test.com</li>
                <li>zhang1er4@test.com</li>
                <li>zhang1san1@test.com</li>
                <li>li3er4@test.com</li>
                <li>li3san1@test.com</li>
                <li>li3si4@test.com</li>
                <li>wang2san1@test.com</li>
                <li>wang2si4@test.com</li>
                <li>wang2wu3@test.com</li>
                <li>zhao4si4@test.com</li>
                <li>zhao4wu3@test.com</li>
                <li>zhao4wu3@test.com</li>
                <li>sun1wu3@test.com</li>
                <li>sun1liu4@test.com</li>
                <li>sun1qi1@test.com</li>
                <li>zhou1liu4@test.com</li>
                <li>zhou1qi1@test.com</li>
                <li>zhou1ba1@test.com</li>
                <li>wu2qi1@test.com</li>
                <li>wu2ba1@test.com</li>
                <li>wu2jiu3@test.com</li>
                <li>zheng4ba1@test.com</li>
                <li>zheng4jiu3@test.com</li>
                <li>zheng4shi2@test.com</li>
    
    
            </ul>
        </div>
        <div id="listName" style="display:none">
            <ul>
                <li>刘一</li>
                <li>刘二</li>
                <li>刘三</li>
                <li>陈一</li>
                <li>陈二</li>
                <li>陈三</li>
                <li>张一</li>
                <li>张二</li>
                <li>张三</li>
                <li>李二</li>
                <li>李三</li>
                <li>李四</li>
                <li>王三</li>
                <li>王四 </li>
                <li>王五 </li>
                <li>赵四 </li>
                <li>赵五 </li>
                <li>赵五</li>
                <li>孙五</li>
                <li>孙六 </li>
                <li>孙七</li>
                <li>周六</li>
                <li>周七  </li>
                <li>周八</li>
                <li>吴七</li>
                <li>吴八 </li>
                <li>吴九 </li>
                <li>郑八</li>
                <li>郑十</li>
            </ul>
        </div>
    

    input_search2.js

    var flag1 = 0;
    var flag2 = 0;
    var pos=-1, pos2=-1;

    function init(){

    var t, t2;
    $("#listEmail").css("top",$("#inputBox").css("top")+$("#inputBox").css("height"));
    $("#listEmail").css("left",$("#inputBox").css("left"));
    $("#listName").css("top",$("#inputBox").css("top")+$("#inputBox").css("height"));
    $("#listName").css("left",$("#inputBox").css("left"));
    hide();
    $("li").css("font-size",$("#s_custemail").css("font-size"));
    $("li").css("font-size",$("#s_custname").css("font-size"));
    $("li").css("text-align","left");

    bindInput();
    
    var email = $("#s_custemail");
    var name = $("#s_custname");
    
    $("#listEmail li").mouseup(function(e){
        var str = $(this).text();
        setValue(email, str);
    });
    
    $("#listName li").mouseup(function(){
        var str = $(this).text();
        setValue(name, str);
    }); 
    
    $('#listEmail li').mousemove(function(e){
        pos = getMouseLocation(e);      
    });
    
    $('#listName li').mousemove(function(e){
        pos2 = getMouseLocation(e);
    });
    
    $("#s_custemail").blur(function(){
        if( pos==-1 || !isOutOfBound(pos,1) ){
            pos = -1;
            hide();
        }
    });
    
    $("#s_custname").blur(function(){
        if( pos==-1 || !isOutOfBound(pos,0) ){
            pos = -1;
            hide();
        }
    }); 
    

    }

    function bindInput(){
    //IE
    if (window.ActiveXObject){
    document.getElementById('s_custemail').attachEvent("onpropertychange",show1);
    document.getElementById('s_custname').attachEvent("onpropertychange",show2);
    }else{
    $("#s_custemail").bind("input",show1);
    $("#s_custname").bind("input",show2);
    }
    }

    function show1(){
    var s_value = $("#s_custemail").val();
    $("#listEmail").children().children("li").hide();
    showListEmail();
    if(s_value.length >= 1){
    $("#listEmail").children().children("li").each(function(){
    var tmp = $(this).text().substr(0,$(this).text().length);

            if(tmp && s_value==tmp.substr(0,s_value.length)){
                $(this).show();
                flag1 = 1;
            }
        });
    }
    

    }

    function show2(){
    var s_value = $("#s_custname").val();
    $("#listName").children().children("li").hide();
    showListName();
    if(s_value.length >= 1){
    $("#listName").children().children("li").each(function(){
    var tmp = $(this).text().substr(0,$(this).text().length);

            if(tmp && s_value==tmp.substr(0,s_value.length)){
                $(this).show();
                flag1 = 1;
            }
        });
    }
    

    }

    function hide(){
    $("#listEmail").css("display","none");
    $("#listName").css("display","none");
    }

    function setValue(obj, str){
    obj.val(str);
    hide();
    obj.focus();
    }

    function showListEmail(){
    var obj = $('#s_custemail');
    $("#listEmail").css("left",parseInt(obj.offset().left));
    $("#listEmail").css("top",parseInt(obj.offset().top +obj.outerHeight()));

    $("#listEmail").css('display', 'block');
    }

    function showListName(){
    var obj = $('#s_custname');
    $("#listName").css("left",parseInt(obj.offset().left));
    $("#listName").css("top", parseInt(obj.offset().top + obj.outerHeight()));

    $("#listName").css('display', 'block');
    }

    function getEvent() //同时兼容ie和ff的写法
    {
    if (document.all)
    return window.event;
    func = getEvent.caller;
    while (func != null) {
    var arg0 = func.arguments[0];
    if (arg0) {
    if ((arg0.constructor == Event
    || arg0.constructor == MouseEvent)
    || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
    return arg0;
    }
    }
    func = func.caller;
    }
    return null;
    }

    function getMouseLocation(event) {
    var is_ff = (navigator.userAgent.indexOf("Firefox") != -1); //Firefox
    var e = getEvent(event);
    var mouseX = 0;
    var mouseY = 0;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    if (
    is_ff) {
    mouseX = e.layerX + document.body.scrollLeft;
    mouseY = e.layerY + document.body.scrollLeft;
    }
    else {
    mouseX = e.pageX || e.clientX + scrollX;
    mouseY = e.pageY || e.clientY + scrollY;
    }
    return { x: mouseX, y: mouseY };
    }

    function isOutOfBound(pos, flag){
    var obj;
    if (flag) {
    obj = $('#listEmail');
    }else{
    obj = $('#listName');
    }
    if (pos && obj
    &&pos.x >= obj.offset().left
    && pos.x <= obj.offset().left+obj.outerWidth()
    && pos.y >= obj.offset().top
    && pos.y <= obj.offset().top+obj.outerHeight() ) {
    return true;
    };
    return false;
    }

    点赞 评论

相关推荐