为什么这个'jplist自动完成'脚本不起作用？
这是我所拥有的一个有效例子：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<link href="http://jplist.com/content/css/jplist.demo-pages.min.css" rel="stylesheet" type="text/css" />
<link href="http://jplist.com/content/css/jplist.core.min.css" rel="stylesheet" type="text/css" />
<link href="http://jplist.com/content/css/jplist.autocomplete.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="demo" class="box jplist" style="margin: 20px 0 50px 0">
<!-- ios button: show/hide panel -->
<div class="jplist-ios-button">
<i class="fa fa-sort"></i>
jPList Actions
</div>
<!-- panel -->
<div class="jplist-panel box panel-top">
<!-- autocomplete control -->
<div class="jplist-autocomplete"
data-control-type="autocomplete"
data-control-name="default-autocomplete"
data-control-action="autocomplete"
data-path=".title">
<!-- autocomplete textbox -->
<input type="text" placeholder="Filter by Title" />
<!-- autocomplete button -->
<button type="button">
<i class="fa fa-angle-double-down"></i>
</button>
</div>
</div>
<!-- data -->
<div class="list box text-shadow">
<!-- item 1 -->
<a href="https://www.google.co.il/#q=calendar" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/woodstump.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">05/08/2003</p>
<p class="title">Calendar</p>
<p class="desc">A calendar is a system of organizing days for social, religious, commercial, or administrative purposes. This is done by giving names to periods of time, typically days, weeks, months, and years. The name given to each day is known as a date. Periods in a calendar (such as years and months) are usually, though not necessarily, synchronized with the cycle of the sun or the moon.</p>
<p class="theme">
<span class="other">Other</span>
<span class="group1">Group 1</span>
</p>
<p class="like">18 Likes</p>
</div>
</div>
</a>
<!-- item 2 -->
<a href="https://www.google.co.il/#q=architecture" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/winter-sun.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">03/18/2012</p>
<p class="title">Architecture</p>
<p class="desc">Architecture is both the process and product of planning, designing and construction. Architectural works, in the material form of buildings, are often perceived as cultural symbols and as works of art. Historical civilizations are often identified with their surviving architectural achievements.</p>
<p class="theme">
<span class="architecture">Architecture</span>
<span class="group2">Group 2</span>
</p>
<p class="like">25 Likes</p>
</div>
</div>
</a>
<!-- item 3 -->
<a href="https://www.google.co.il/#q=autumn" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/winter-2.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">01/16/2011</p>
<p class="title">Autumn</p>
<p class="desc">Autumn or Fall is one of the four temperate seasons. Autumn marks the transition from summer into winter, in September (Northern Hemisphere) or March (Southern Hemisphere) when the arrival of night becomes noticeably earlier. The equinoxes might be expected to be in the middle of their respective seasons, but temperature lag (caused by the thermal latency of the ground and sea) means that seasons appear later than dates calculated from a purely astronomical perspective.</p>
<p class="theme">
<span class="nature">Nature</span>
<span class="group3">Group 3</span>
</p>
<p class="like">12 Likes</p>
</div>
</div>
</a>
<!-- item 4 -->
<a href="https://www.google.co.il/#q=boats" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/winter-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">02/24/2000</p>
<p class="title">Boats</p>
<p class="desc">A boat is a watercraft of any size designed to float or plane, to provide passage across water. Usually this water will be inland (lakes) or in protected coastal areas. However, boats such as the whaleboat were designed to be operated from a ship in an offshore environment. In naval terms, a boat is a vessel small enough to be carried aboard another vessel (a ship).</p>
<p class="theme">
<span class="other">Other</span>
<span class="group1">Group 1</span>
</p>
<p class="like">11 Likes</p>
</div>
</div>
</a>
<!-- item 5 -->
<a href="https://www.google.co.il/#q=arch" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/arch-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">03/15/2012</p>
<p class="title">Arch</p>
<p class="desc">An arch is a structure that spans a space and supports a load. Arches appeared as early as the 2nd millennium BC in Mesopotamian brick architecture and their systematic use started with the Ancient Romans who were the first to apply the technique to a wide range of structures.</p>
<p class="theme">
<span class="architecture">Architecture</span>
<span class="group2">Group 2</span>
</p>
<p class="like">5 Likes</p>
</div>
</div>
</a>
<!-- item 6 -->
<a href="https://www.google.co.il/#q=books" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/book-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">11/22/2001</p>
<p class="title">Books</p>
<p class="desc">A book is a set of written, printed, illustrated, or blank sheets, made of ink, paper, parchment, or other materials, usually fastened together to hinge at one side. A single sheet within a book is called a leaf, and each side of a leaf is called a page. A book produced in electronic format is known as an electronic book (e-book).</p>
<p class="theme">
<span class="other">Other</span>
<span class="group3">Group 3</span>
</p>
<p class="like">100 Likes</p>
</div>
</div>
</a>
<!-- item 7 -->
<a href="https://www.google.co.il/#q=business" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/business-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">02/05/2004</p>
<p class="title">Business</p>
<p class="desc">A business (also known as enterprise or firm) is an organization engaged in the trade of goods, services, or both to consumers. Businesses are predominant in capitalist economies, where most of them are privately owned and administered to earn profit to increase the wealth of their owners. Businesses may also be not-for-profit or state-owned. A business owned by multiple individuals may be referred to as a company, although that term also has a more precise meaning.</p>
<p class="theme">
<span class="other">Other</span>
<span class="group1">Group 1</span>
</p>
<p class="like">15 Likes</p>
</div>
</div>
</a>
<!-- item 8 -->
<a href="https://www.google.co.il/#q=car" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/car-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">09/01/2007</p>
<p class="title">Car</p>
<p class="desc">An automobile, autocar, motor car or car is a wheeled motor vehicle used for transporting passengers, which also carries its own engine or motor. Most definitions of the term specify that automobiles are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels, and to be constructed principally for the transport of people rather than goods.</p>
<p class="theme">
<span class="other">Other</span>
<span class="group2">Group 2</span>
</p>
<p class="like">7 Likes</p>
</div>
</div>
</a>
<!-- item 9 -->
<a href="https://www.google.co.il/#q=christmas" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/christmas-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">11/12/1998</p>
<p class="title">Christmas</p>
<p class="desc">Christmas or Christmas Day is an annual commemoration of the birth of Jesus Christ, celebrated generally on December as a religious and cultural holiday by billions of people around the world. A feast central to the Christian liturgical year, it closes the Advent season and initiates the twelve days of Christmastide. Christmas is a civil holiday in many of the world"s nations, is celebrated by an increasing number of non-Christians, and is an integral part of the Christmas and holiday season.</p>
<p class="theme">
<span class="christmas">Christmas</span>
<span class="group3">Group 3</span>
</p>
<p class="like">29 Likes</p>
</div>
</div>
</a>
<!-- item 10 -->
<a href="https://www.google.co.il/#q=the+christmas+toy" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/christmas-2.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">06/10/1995</p>
<p class="title">The Christmas Toy</p>
<p class="desc">The Christmas Toy is a 1986 made-for-TV movie by The Jim Henson Company. It originally aired on ABC on December 6, 1986, and was originally sponsored by Kraft Foods. Originally introduced by Kermit The Frog, it was released on VHS format in 1993. In 2008, HIT Entertainment (distributed by Lionsgate) released the special on DVD, but edited out Kermit"s appearance due to legal issues.</p>
<p class="theme">
<span class="christmas">Christmas</span>
<span class="group1">Group 1</span>
</p>
<p class="like">35 Likes</p>
</div>
</div>
</a>
</div>
<div class="box jplist-no-results text-shadow align-center">
<p>No results found</p>
</div>
</div>
<!-- end of demo -->
<!-- jplist -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://jplist.com/content/js/jplist/jplist.core.min.jss"></script>
<script src="http://jplist.com/content/js/jplist/jplist.autocomplete.min.js"></script>
<script>
$('document').ready(function(){
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item-link',
panelPath: '.jplist-panel'
});
});
</script>
</body>
</html>
这是jplist-autocomplete脚本 检查了很多次但是当我输入输入字段时没有任何反应。
1 个答案:
答案 0 :(得分：0)
-
你在剧本的网址上输了一个拼写错误：
http://jplist.com/content/js/jplist/jplist.core.min.jss http://jplist.com/content/js/jplist/jplist.core.min.js
-
您应该使用
$(document).ready（而不是$('document').ready，因为没有带有标记名＆＃34;文档＆＃34;）的元素。
下次检查控制台/网络选项卡，看看是否有任何错误：
以下是代码的修复：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<link href="http://jplist.com/content/css/jplist.demo-pages.min.css" rel="stylesheet" type="text/css" />
<link href="http://jplist.com/content/css/jplist.core.min.css" rel="stylesheet" type="text/css" />
<link href="http://jplist.com/content/css/jplist.autocomplete.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="demo" class="box jplist" style="margin: 20px 0 50px 0">
<!-- ios button: show/hide panel -->
<div class="jplist-ios-button">
<i class="fa fa-sort"></i>
jPList Actions
</div>
<!-- panel -->
<div class="jplist-panel box panel-top">
<!-- autocomplete control -->
<div class="jplist-autocomplete"
data-control-type="autocomplete"
data-control-name="default-autocomplete"
data-control-action="autocomplete"
data-path=".title">
<!-- autocomplete textbox -->
<input type="text" placeholder="Filter by Title" />
<!-- autocomplete button -->
<button type="button">
<i class="fa fa-angle-double-down"></i>
</button>
</div>
</div>
<!-- data -->
<div class="list box text-shadow">
<!-- item 1 -->
<a href="https://www.google.co.il/#q=calendar" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/woodstump.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">05/08/2003</p>
<p class="title">Calendar</p>
<p class="desc">A calendar is a system of organizing days for social, religious, commercial, or administrative purposes. This is done by giving names to periods of time, typically days, weeks, months, and years. The name given to each day is known as a date. Periods in a calendar (such as years and months) are usually, though not necessarily, synchronized with the cycle of the sun or the moon.</p>
<p class="theme">
<span class="other">Other</span>
<span class="group1">Group 1</span>
</p>
<p class="like">18 Likes</p>
</div>
</div>
</a>
<!-- item 2 -->
<a href="https://www.google.co.il/#q=architecture" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/winter-sun.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">03/18/2012</p>
<p class="title">Architecture</p>
<p class="desc">Architecture is both the process and product of planning, designing and construction. Architectural works, in the material form of buildings, are often perceived as cultural symbols and as works of art. Historical civilizations are often identified with their surviving architectural achievements.</p>
<p class="theme">
<span class="architecture">Architecture</span>
<span class="group2">Group 2</span>
</p>
<p class="like">25 Likes</p>
</div>
</div>
</a>
<!-- item 3 -->
<a href="https://www.google.co.il/#q=autumn" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/winter-2.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">01/16/2011</p>
<p class="title">Autumn</p>
<p class="desc">Autumn or Fall is one of the four temperate seasons. Autumn marks the transition from summer into winter, in September (Northern Hemisphere) or March (Southern Hemisphere) when the arrival of night becomes noticeably earlier. The equinoxes might be expected to be in the middle of their respective seasons, but temperature lag (caused by the thermal latency of the ground and sea) means that seasons appear later than dates calculated from a purely astronomical perspective.</p>
<p class="theme">
<span class="nature">Nature</span>
<span class="group3">Group 3</span>
</p>
<p class="like">12 Likes</p>
</div>
</div>
</a>
<!-- item 4 -->
<a href="https://www.google.co.il/#q=boats" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/winter-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">02/24/2000</p>
<p class="title">Boats</p>
<p class="desc">A boat is a watercraft of any size designed to float or plane, to provide passage across water. Usually this water will be inland (lakes) or in protected coastal areas. However, boats such as the whaleboat were designed to be operated from a ship in an offshore environment. In naval terms, a boat is a vessel small enough to be carried aboard another vessel (a ship).</p>
<p class="theme">
<span class="other">Other</span>
<span class="group1">Group 1</span>
</p>
<p class="like">11 Likes</p>
</div>
</div>
</a>
<!-- item 5 -->
<a href="https://www.google.co.il/#q=arch" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/arch-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">03/15/2012</p>
<p class="title">Arch</p>
<p class="desc">An arch is a structure that spans a space and supports a load. Arches appeared as early as the 2nd millennium BC in Mesopotamian brick architecture and their systematic use started with the Ancient Romans who were the first to apply the technique to a wide range of structures.</p>
<p class="theme">
<span class="architecture">Architecture</span>
<span class="group2">Group 2</span>
</p>
<p class="like">5 Likes</p>
</div>
</div>
</a>
<!-- item 6 -->
<a href="https://www.google.co.il/#q=books" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/book-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">11/22/2001</p>
<p class="title">Books</p>
<p class="desc">A book is a set of written, printed, illustrated, or blank sheets, made of ink, paper, parchment, or other materials, usually fastened together to hinge at one side. A single sheet within a book is called a leaf, and each side of a leaf is called a page. A book produced in electronic format is known as an electronic book (e-book).</p>
<p class="theme">
<span class="other">Other</span>
<span class="group3">Group 3</span>
</p>
<p class="like">100 Likes</p>
</div>
</div>
</a>
<!-- item 7 -->
<a href="https://www.google.co.il/#q=business" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/business-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">02/05/2004</p>
<p class="title">Business</p>
<p class="desc">A business (also known as enterprise or firm) is an organization engaged in the trade of goods, services, or both to consumers. Businesses are predominant in capitalist economies, where most of them are privately owned and administered to earn profit to increase the wealth of their owners. Businesses may also be not-for-profit or state-owned. A business owned by multiple individuals may be referred to as a company, although that term also has a more precise meaning.</p>
<p class="theme">
<span class="other">Other</span>
<span class="group1">Group 1</span>
</p>
<p class="like">15 Likes</p>
</div>
</div>
</a>
<!-- item 8 -->
<a href="https://www.google.co.il/#q=car" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/car-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">09/01/2007</p>
<p class="title">Car</p>
<p class="desc">An automobile, autocar, motor car or car is a wheeled motor vehicle used for transporting passengers, which also carries its own engine or motor. Most definitions of the term specify that automobiles are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels, and to be constructed principally for the transport of people rather than goods.</p>
<p class="theme">
<span class="other">Other</span>
<span class="group2">Group 2</span>
</p>
<p class="like">7 Likes</p>
</div>
</div>
</a>
<!-- item 9 -->
<a href="https://www.google.co.il/#q=christmas" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/christmas-1.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">11/12/1998</p>
<p class="title">Christmas</p>
<p class="desc">Christmas or Christmas Day is an annual commemoration of the birth of Jesus Christ, celebrated generally on December as a religious and cultural holiday by billions of people around the world. A feast central to the Christian liturgical year, it closes the Advent season and initiates the twelve days of Christmastide. Christmas is a civil holiday in many of the world"s nations, is celebrated by an increasing number of non-Christians, and is an integral part of the Christmas and holiday season.</p>
<p class="theme">
<span class="christmas">Christmas</span>
<span class="group3">Group 3</span>
</p>
<p class="like">29 Likes</p>
</div>
</div>
</a>
<!-- item 10 -->
<a href="https://www.google.co.il/#q=the+christmas+toy" title="" class="list-item-link">
<div class="list-item box">
<!-- img -->
<div class="img">
<img src="http://jplist.com/content/img/thumbs/christmas-2.jpg" alt="" title="" />
</div>
<!-- data -->
<div class="block">
<p class="date">06/10/1995</p>
<p class="title">The Christmas Toy</p>
<p class="desc">The Christmas Toy is a 1986 made-for-TV movie by The Jim Henson Company. It originally aired on ABC on December 6, 1986, and was originally sponsored by Kraft Foods. Originally introduced by Kermit The Frog, it was released on VHS format in 1993. In 2008, HIT Entertainment (distributed by Lionsgate) released the special on DVD, but edited out Kermit"s appearance due to legal issues.</p>
<p class="theme">
<span class="christmas">Christmas</span>
<span class="group1">Group 1</span>
</p>
<p class="like">35 Likes</p>
</div>
</div>
</a>
</div>
<div class="box jplist-no-results text-shadow align-center">
<p>No results found</p>
</div>
</div>
<!-- end of demo -->
<!-- jplist -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://jplist.com/content/js/jplist/jplist.core.min.js"></script>
<script src="http://jplist.com/content/js/jplist/jplist.autocomplete.min.js"></script>
<script>
$(document).ready(function(){
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item-link',
panelPath: '.jplist-panel'
});
});
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？