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

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

显示状态:

图片说明

添加状态:
图片说明

0

2个回答

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

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

select2动态添加选项

1
u012503756
bulidfer 谢谢 我试试
11 个月之前 回复

<!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;
}

0
u012503756
bulidfer 谢谢 我试试
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

2
求一个js控件模板 数据库有内容 查询后添加成小标签的形式
3
哪位大哥能帮我写个原生的 JS getJSON
1
如何使用javascript实现一件电脑优化、清理和设置主页的功能,可以远程控制设置主页的内容
2
一个简单的javascript的问题,怎么使用jquery判断一个页面
9
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
5
简单的js问题,回答就有c币了:请问怎么在js里面实现求一个矩阵的数学期望值?
25
急等马上就给c币,输入3个数字,求其中最大的和最小的数字,怎么实现?
8
javascript求数组中的最大数,返回的是数组的下标,不是值,百度了一天没找到,怎么做
8
javascript开发读取一个excel文件,并且提取里面的表格到数组,用javascpt怎么写?
6
js 用str+=拼接select标签 选中状态 替换jsp静态页面下拉菜单 无法展示选中状态
2
javascript怎么实现判断页面上的链接的功能,判断链接怎么用js语言实现呢?
9
请教一个简单一些的javascript的问题,关于变量的转换
6
javascript中怎么实现求一个数组的中位数,求中位数的方式怎么实现的呢?
2
有谁懂得js通信com口的东西么各位大神 最好有具体实例代码一次能成功的 网上许多代码都不好使
1
layabox js~~~~~~~~~~~~~~~
2
一个拖动拼图游戏的代码小问题想不通
8
一个有关javascript非常简单的问题,回答好了就采纳!!!!!
6
如何使用javascript编写一个加法程序,从文本框输入两个数字,用alert输出结果?
3
javascript中怎么实现打印一个杨辉三角形的前5行?
2
PGNViewer 下载后怎样在WEB打开