我提到了链接http://blog.parhammajd.co.uk/css/how-to-create-a-live-search-with-ajax-and-jquery/。我将代码复制到记事本中并使用适当的扩展名保存。我发现教程中提到的不是 Script.js ，而应该是 jquery.js 。但是，代码仍然无效。
这是我的代码： -
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Live Search</title>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<div id="searcharea">
<label for="search">live search</label>
<p>Enter the name or info about a speaker</p>
<input type="search" name="search" id="search" placeholder="name or info" />
</div>
<div id="update"></div>
<script src="jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
的jquery.js
$('#search').keyup(function(){
var searchField = $('#search').val();
var myExp = new RegExp(searchField, 'i');
$.getJSON('data.json', function(data){
var output = '<ul class="searchresult">';
$.each(data, function(key, val){
if((val.name.search(myExp) != -1) || (val.bio.search(myExp) != -1)) {
output +='<li>';
output +='<h2>' + val.name + '</h2>';
output +='<img src="images/' + val.shortname + '_tn.jpg" alt="'+ val.name +'" />';
output +='<p>' + val.bio + '</p>';
output +='</li>';
}
});
output += '</ul>';
$('#update').html(output);
});
});
mystyle.css
body {
background: #DAD7C7;
}
#searcharea {
margin: 0 auto;
text-align: center;
background: #BF996B;
padding: 10px;
width: 30%;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#searcharea label {
font: bold 1.3em Arial;
text-transform: uppercase;
padding-bottom: 5px;
color: #A61C1C;
}
#searcharea p {
margin: 0;
line-height: 1em;
padding-bottom: 5px;
}
#searcharea input {
width: 80%;
text-align: center;
}
#update {
font-family: Georgia, "Times New Roman", Times, serif;
width: 70%;
margin: 0 auto;
border-top: 1px dotted #CCC;
}
#update ul {
list-style: none;
margin: 0;
padding: 0;
}
#update ul li {
width: 100%;
padding: 0 20px;
background: #EEE;
padding-bottom: 10px;
height: 110px;
overflow: hidden;
border-bottom: 1px dotted #CCC;
-webkit-animation: myanim 1s;
-moz-appearance-animation: myanim 1s;
-o-animation: myanim 1s;
animation: myanim 1s;
-webkit-transition: height 0.3s ease-out;
-moz-appearance-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
}
#update li:hover {
background: #FFFCE5;
min-height: 110px;
height: 250px;
overflow: visible;
}
#update h2 {
margin: 0;
padding: 0;
font-size: 1.2em;
padding-bottom: 5px;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #BF5841;
border-bottom: 1px dotted #CCC;
margin-bottom: 10px;
}
#update img {
float: left;
width: 80px;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
@-webkit-keyframes myanim {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}
@-o-keyframes myanim {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}
@-moz-keyframes myanim {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}
@keyframes myanim {
0% {
opacity: 0.3;
}
100% {
opacity: 1.0;
}
}
data.json
[
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham",
"reknown":"Royal Academy of Painting and Sculpture",
"bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled "The Un-Collection" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar",
"reknown":"Artist to Watch in 2012",
"bio":"The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn",
"reknown":"New York University",
"bio":"Hillary is a sophomore art sculpture student at New York University, and has already won all the major international prizes for new sculptors, including the Divinity Circle, the International Sculptor's Medal, and the Academy of Paris Award. Hillary's CAC exhibit features 25 abstract watercolor paintings that contain only water images including waves, deep sea, and river."
},
{
"name":"Hassum Harrod",
"shortname":"Hassum_Harrod",
"reknown":"Art College in New Dehli",
"bio":"The Art College in New Dehli has sponsored Hassum on scholarship for his entire undergraduate career at the university, seeing great promise in his contemporary paintings of landscapes - that use equal parts muted and vibrant tones, and are almost a contradiction in art. Hassum will be speaking on "The use and absence of color in modern art" during Thursday's agenda."
},
{
"name":"Jennifer Jerome",
"shortname":"Jennifer_Jerome",
"reknown":"New Orleans, LA",
"bio":"A native of New Orleans, much of Jennifer's work has centered around abstract images that depict flooding and rebuilding, having grown up as a teenager in the post-flood years. Despite the sadness of devastation and lives lost, Jennifer's work also depicts the hope and togetherness of a community that has persevered. Jennifer's exhibit will be discussed during Tuesday's Water in Art theme."
},
{
"name":"LaVonne L. LaRue",
"shortname":"LaVonne_LaRue",
"reknown":"Chicago, IL",
"bio":"LaVonne's giant-sized paintings all around Chicago tell the story of love, nature, and conservation - themes that are central to her heart. LaVonne will share her love and skill of graffiti art on Monday's schedule, as she starts the painting of a 20-foot high wall in the Rousseau Room of Hotel Contempo in front of a standing-room only audience in Art in Unexpected Places."
},
{
"name":"Constance Olivia Smith",
"shortname":"Constance_Smith",
"reknown":"Fullerton-Brighton-Norwell Award",
"bio":"Constance received the Fullerton-Brighton-Norwell Award for Modern Art for her mixed-media image of a tree of life, with jewel-adorned branches depicting the arms of humanity, and precious gemstone-decorated leaves representing the spouting buds of togetherness. The daughter of a New York jeweler, Constance has been salvaging the discarded remnants of her father's jewelry-making since she was five years old, and won the New York State Fair grand prize at the age of 8 years old for a gem-adorned painting of the Manhattan Bridge."
},
{
"name":"Riley Rudolph Rewington",
"shortname":"Riley_Rewington",
"reknown":"Roux Academy of Art, Media, and Design",
"bio":"A first-year student at the Roux Academy of Art, Media, and Design, Riley is already changing the face of modern art at the university. Riley's exquisite abstract pieces have no intention of ever being understood, but instead beg the viewer to dream, create, pretend, and envision with their mind's eye. Riley will be speaking on the "Art of Abstract" during Thursday's schedule"
},
{
"name":"Xhou Ta",
"shortname":"Xhou_Ta",
"reknown":"China International Art University",
"bio":"A senior at the China International Art University, Xhou has become well-known for his miniature sculptures, often the size of a rice granule, that are displayed by rear projection of microscope images on canvas. Xhou will discuss the art and science behind his incredibly detailed works of art."
}
]
搜索结果似乎永远不会出现。可能的原因是什么？
答案 0 :(得分：1)
您需要在自定义脚本之前加载Jquery库。否则浏览器不会$.getJSON知道你的意思。
尝试像{ - 1}}一样切换脚本加载 -
HTML答案 1 :(得分：0)
我正在进行实时搜索并遇到了您的问题。我弄清楚问题是什么。
以下是代码：
<强>的script.js
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('data.json', function(data) {
var output = '<ul class="searchresults">';
$.each(data, function(key, val) {
if ((val.name.search(myExp) != -1) ||
(val.bio.search(myExp) != -1)) {
output += '<li>';
output += '<h2>'+ val.name +'</h2>';
output += '<p>'+ val.bio +'</p>';
output += '</li>';
}
});
output += '</ul>';
$('#update').html(output);
}); //get JSON
});
<强>的index.html
<html lang="en"><head>
<meta charset="utf-8">
<title>Live Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body cz-shortcut-listen="true">
<div id="searcharea">
<label for="search">live search</label>
<p>Enter the name or info about a speaker</p>
<input type="search" name="search" id="search" placeholder="name or info">
</div>
<div id="update"></div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body></html>
<强>的jquery.js
jQuery v1.8.3的本地副本
<强> data.json
[
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham",
"reknown":"Royal Academy of Painting and Sculpture",
"bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar",
"reknown":"Artist to Watch in 2012",
"bio":"The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn",
"reknown":"New York University",
"bio":"Hillary is a sophomore art sculpture student at New York University, and has already won all the major international prizes for new sculptors, including the Divinity Circle, the International Sculptor's Medal, and the Academy of Paris Award. Hillary's CAC exhibit features 25 abstract watercolor paintings that contain only water images including waves, deep sea, and river."
},
{
"name":"Hassum Harrod",
"shortname":"Hassum_Harrod",
"reknown":"Art College in New Dehli",
"bio":"The Art College in New Dehli has sponsored Hassum on scholarship for his entire undergraduate career at the university, seeing great promise in his contemporary paintings of landscapes - that use equal parts muted and vibrant tones, and are almost a contradiction in art. Hassum will be speaking on \"The use and absence of color in modern art\" during Thursday's agenda."
},
{
"name":"Jennifer Jerome",
"shortname":"Jennifer_Jerome",
"reknown":"New Orleans, LA",
"bio":"A native of New Orleans, much of Jennifer's work has centered around abstract images that depict flooding and rebuilding, having grown up as a teenager in the post-flood years. Despite the sadness of devastation and lives lost, Jennifer's work also depicts the hope and togetherness of a community that has persevered. Jennifer's exhibit will be discussed during Tuesday's Water in Art theme."
},
{
"name":"LaVonne L. LaRue",
"shortname":"LaVonne_LaRue",
"reknown":"Chicago, IL",
"bio":"LaVonne's giant-sized paintings all around Chicago tell the story of love, nature, and conservation - themes that are central to her heart. LaVonne will share her love and skill of graffiti art on Monday's schedule, as she starts the painting of a 20-foot high wall in the Rousseau Room of Hotel Contempo in front of a standing-room only audience in Art in Unexpected Places."
},
{
"name":"Constance Olivia Smith",
"shortname":"Constance_Smith",
"reknown":"Fullerton-Brighton-Norwell Award",
"bio":"Constance received the Fullerton-Brighton-Norwell Award for Modern Art for her mixed-media image of a tree of life, with jewel-adorned branches depicting the arms of humanity, and precious gemstone-decorated leaves representing the spouting buds of togetherness. The daughter of a New York jeweler, Constance has been salvaging the discarded remnants of her father's jewelry-making since she was five years old, and won the New York State Fair grand prize at the age of 8 years old for a gem-adorned painting of the Manhattan Bridge."
},
{
"name":"Riley Rudolph Rewington",
"shortname":"Riley_Rewington",
"reknown":"Roux Academy of Art, Media, and Design",
"bio":"A first-year student at the Roux Academy of Art, Media, and Design, Riley is already changing the face of modern art at the university. Riley's exquisite abstract pieces have no intention of ever being understood, but instead beg the viewer to dream, create, pretend, and envision with their mind's eye. Riley will be speaking on the \"Art of Abstract\" during Thursday's schedule"
},
{
"name":"Xhou Ta",
"shortname":"Xhou_Ta",
"reknown":"China International Art University",
"bio":"A senior at the China International Art University, Xhou has become well-known for his miniature sculptures, often the size of a rice granule, that are displayed by rear projection of microscope images on canvas. Xhou will discuss the art and science behind his incredibly detailed works of art."
}
]
<强> styles.css的
/* @override
http://iviewsource.com/exercises/ajax/mystyle.css */
body {
background: #DAD7C7;
}
#searcharea {
margin: 0 auto;
text-align: center;
background: #BF996B;
padding: 10px;
width: 30%;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#searcharea label {
font: bold 1.3em Arial;
text-transform: uppercase;
padding-bottom: 5px;
color: #A61C1C;
}
#searcharea p {
margin: 0;
line-height: 1em;
padding-bottom: 5px;
}
#searcharea input {
width: 80%;
text-align: center;
}
#update {
font-family: Georgia, "Times New Roman", Times, serif;
width: 70%;
margin: 0 auto;
border-top: 1px dotted #CCC;
}
#update ul {
list-style: none;
margin: 0;
padding: 0;
}
#update ul li {
width: 100%;
padding: 0 20px;
background: #EEE;
padding-bottom: 10px;
height: 110px;
overflow: hidden;
border-bottom: 1px dotted #CCC;
-webkit-animation: myanim 1s;
-moz-animation: myanim 1s;
-o-animation: myanim 1s;
animation: myanim 1s;
-webkit-transition: height 0.3s ease-out;
-moz-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
}
#update li:hover {
background: #FFFCE5;
min-height: 110px;
height: 250px;
overflow: visible;
}
#update h2 {
margin: 0;
padding: 0;
font-size: 1.2em;
padding-bottom: 5px;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #BF5841;
border-bottom: 1px dotted #CCC;
margin-bottom: 10px;
}
#update img {
float: left;
width: 80px;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
@-webkit-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
@-o-keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}
@keyframes myanim {
0% { opacity: 0.3; }
100% { opacity: 1.0; }
}