搜尋
首頁web前端js教程jquery仿搜尋自動聯想功能代碼_jquery

複製程式碼如下程式碼:

渡//EN" "http://www.w3.org/TR/html4/loose.dtd">



在此插入標題標題>

body{margin:0px ;padding:0px;}
ul{margin:px;padding:0px;list-style-type:none;}
;


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

});

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

//給ul格式化資料
var ul=$("#ul1");
$.each(資料,函數(索引,項目)
{
var li=$("
  • ");

    $.each( item,function(名稱,值)
    {
    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 陣列=[];

    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=$ (這個);
    var otxt=$(this).html();
    $("#txt").empty().val(otxt);
    };
    腳本>
    頭>


    ;


    自動提示




    表格>
    中心>
    身體>


    陳述
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    如何利用PHP函数进行搜索和过滤数据?如何利用PHP函数进行搜索和过滤数据?Jul 24, 2023 am 08:01 AM

    如何利用PHP函数进行搜索和过滤数据?在使用PHP进行开发的过程中,经常需要对数据进行搜索和过滤。PHP提供了丰富的函数和方法来帮助我们实现这些操作。本文将介绍一些常用的PHP函数和技巧,帮助你高效地进行数据的搜索和过滤。字符串搜索PHP中常用的字符串搜索函数是strpos()和strstr()。strpos()用于查找字符串中某个子串的位置,如果存在,则返

    PHP如何对接淘宝商品搜索API文档PHP如何对接淘宝商品搜索API文档Jul 01, 2023 pm 10:16 PM

    PHP如何对接淘宝商品搜索API文档淘宝是中国最大的电子商务平台之一,拥有庞大的商品库存和用户群体。对于开发者来说,通过对接淘宝的API接口,可以获取商品信息、推广活动以及进行交易等功能,从而实现个性化的商业应用。本文将介绍如何使用PHP语言对接淘宝商品搜索API,帮助开发者快速构建自己的电商应用。第一步:注册成为淘宝开发者在开始之前,需要先注册成为淘宝开发

    Laravel开发:如何使用Laravel Scout实现全文搜索?Laravel开发:如何使用Laravel Scout实现全文搜索?Jun 14, 2023 am 10:14 AM

    Laravel开发:如何使用LaravelScout实现全文搜索?LaravelScout是一个Laravel的全文搜索解决方案,它是一个流行的开源软件,它可以让开发者轻松地实现高效的全文搜索功能。在这篇文章中,我们将介绍如何使用LaravelScout来实现全文搜索功能。安装LaravelScout首先,我们需要安装LaravelScout。可以

    如何使用PHP ZipArchive实现对压缩包的文件过滤和搜索?如何使用PHP ZipArchive实现对压缩包的文件过滤和搜索?Jul 23, 2023 pm 08:34 PM

    如何使用PHPZipArchive实现对压缩包的文件过滤和搜索?概述在Web开发中,我们经常需要对压缩包文件进行处理,包括过滤和搜索。PHP提供了ZipArchive扩展,它使我们能够轻松地对压缩包进行操作。本文将教您如何使用PHPZipArchive扩展来实现对压缩包文件的过滤和搜索功能。步骤首先,确保您的PHP环境已启用ZipArchive扩展。您可

    如何在uniapp中实现关键字搜索如何在uniapp中实现关键字搜索Jul 05, 2023 am 08:53 AM

    如何在uniapp中实现关键字搜索在当前信息爆炸的时代,搜索已经成为我们获取所需信息的重要方法之一。在移动端应用开发中,如何在uniapp中实现关键字搜索,提供用户便捷的搜索功能,是一个非常重要的技术挑战。本文将介绍在uniapp中实现关键字搜索的方法,并提供代码示例供参考。一、创建搜索框组件首先,我们需要在uniapp中创建一个搜索框组件,用于用户输入关键

    UniApp实现搜索功能的配置与实现技巧UniApp实现搜索功能的配置与实现技巧Jul 04, 2023 pm 05:15 PM

    UniApp实现搜索功能的配置与实现技巧随着移动互联网的迅速发展,搜索功能已经成为了几乎每一个应用都必备的功能之一。而对于基于Vue.js的多平台应用开发框架UniApp来说,实现搜索功能也变得更加简单和高效。本文将介绍UniApp中搜索功能的配置与实现技巧,并且附带代码示例,帮助读者快速上手。一、配置搜索功能在uni-app项目的页面文件夹中创建一个搜索页

    react 怎么实现按条件搜索react 怎么实现按条件搜索Dec 28, 2022 pm 04:08 PM

    react实现按条件搜索的方法:1、在state里定义一个对象;2、设置下拉框点击事件onChange,用于接收每选择一个下拉框都进行相应的ID保存;3、把对象附加到接口请求参数上即可。

    如何在Java后端功能开发中实现搜索功能?如何在Java后端功能开发中实现搜索功能?Aug 05, 2023 am 11:09 AM

    如何在Java后端功能开发中实现搜索功能?搜索功能是现代应用程序中必不可少的一个重要功能。无论是在电商平台中搜索商品,还是在社交媒体中搜索朋友,搜索功能都为用户提供了便捷和高效的信息获取方式。在Java后端开发中,我们可以利用各种技术和库来实现搜索功能。本文将介绍一种常用的实现搜索功能的方法,并以Java语言为例给出代码示例。在Java后端开发中,我们通常会

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您聽不到任何人,如何修復音頻
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25:如何解鎖Myrise中的所有內容
    3 週前By尊渡假赌尊渡假赌尊渡假赌

    熱工具

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )專業的PHP整合開發工具

    Atom編輯器mac版下載

    Atom編輯器mac版下載

    最受歡迎的的開源編輯器

    SAP NetWeaver Server Adapter for Eclipse

    SAP NetWeaver Server Adapter for Eclipse

    將Eclipse與SAP NetWeaver應用伺服器整合。

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境