最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jquery仿搜索自动联想功能代码_jquery

来源:动视网 责编:小采 时间:2020-11-27 21:23:46
文档

jquery仿搜索自动联想功能代码_jquery

jquery仿搜索自动联想功能代码_jquery: 代码如下: Insert title here body{margin:0px;padding:0px;} ul{margin:px;padding:0px;list-style-type:none;} $(function(){ a(); onclick(); $(#txt).bind(keyup,function(){ tx
推荐度:
导读jquery仿搜索自动联想功能代码_jquery: 代码如下: Insert title here body{margin:0px;padding:0px;} ul{margin:px;padding:0px;list-style-type:none;} $(function(){ a(); onclick(); $(#txt).bind(keyup,function(){ tx


代码如下:




Insert title here



$(function(){
a();
onclick();
$("#txt").bind("keyup",function(){
txtchange(0);
});

});

function a(){
ularray=[];
var data=[{1:11},{1:12},{1:22},{1:33},{1:123}];

//给ul传入数据
var ul=$("#ul1");
$.each(data,function(index,item)
{
var li=$("

  • ");

    $.each(item,function(name,value)
    {
    var span=$("").html(value);
    li.append(span);
    ularray.push(value);
    });
    ul.append(li);
    });

    //排序
    ularray.sort();
    };

    //keyup事件
    function txtchange(flag)
    {
    var textObj=$("#txt").val();
    var divObj=$("#div1").html();
    var array=[];

    with(divObj)
    {
    var ulHTML=divObj.match(/<[^>]*>/)[0];//拿到开始标签
    val = ularray+ ""; //转为字符串

    for(var i=0;i{
    if(val.split(",")[i].indexOf(textObj)!==-1||flag) //分割成字符串数组
    {
    array[array.length]="

  • "+ularray[i]+"
  • ";
    };
    };//把新得到的集合放入数组

    var liHtml = "";
    $.each(array,function(item,val){
    liHtml += val;
    });//去掉数组间逗号

    divObj=ulHTML+liHtml+"";
    $("#ul1").html(divObj);
    onclick(); //让新得到的数组拥有点击功能
    };
    };

    //span单击事件
    function onclick(){
    $("#ul1 li span").click(function()
    {
    var oli=$(this);
    var otxt=$(this).html();
    $("#txt").empty().val(otxt);

    });
    };







    文档

    jquery仿搜索自动联想功能代码_jquery

    jquery仿搜索自动联想功能代码_jquery: 代码如下: Insert title here body{margin:0px;padding:0px;} ul{margin:px;padding:0px;list-style-type:none;} $(function(){ a(); onclick(); $(#txt).bind(keyup,function(){ tx
    推荐度:
    标签: 搜索 自动 功能
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top