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을 사용한다 "문서 :
정말 고맙습니다 ...... 나는 티와 고심하고있었습니다. 시간부터. –
@AbubakarAnwar, 답변도 투표 해주세요. 감사! – Dekel