1
これは私が持っているものの実施例である：なぜこの 'jplist autocomplete'スクリプトが機能しないのですか？
<!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スクリプトです。
多くの時間をチェックしましたが、入力フィールドに入力すると何も起こりません。タグ名とそのような要素が存在しないよう
http://jplist.com/content/js/jplist/jplist.core.min.jss http://jplist.com/content/js/jplist/jplist.core.min.js
あなたは、$(document).ready（とない$('document').readyを使用する必要があります「文書：
本当にありがとう......私はthiと苦労していた時間からです。 –
@AbubakarAnwar、投票にも気をつけてください。ありがとう！ – Dekel