Alright so I've been messing around with this for 2 days and can't figure it out for the life of me. Basically I have dynamically generated <li> entries appending to a static <ul>, and then calling the .listview('refresh',true) function afterwards.
The first generation is fine, the second generation screws up the padding on the already listed elements, but shows the newly listed elements just fine.
I also have a "show more" button that retrieves these dynamically generated entries, and then updates itself to reflect a new offset. So here is the code.
HTML:
<div data-role="page" id="librarysearch" data-theme="a">
<div data-role="header" data-position="inline"></div>
<div data-role="content">
<div>
Finished
Playlist
<input id="librarysearchinput" size="60" onkeypress="if (event.keyCode == 13) applib.searchlibraryservers();" type="search" />
<a href="javascript:applib.searchlibraryservers();" data-icon="search" data-inline="true" data-role=button>Search</a>
<ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
<div id="showmoreartists"></div>
</div>
</div>
<div data-role="footer" data-position="inline">
</div>
Initial Generation of list elements:
this.searchlibraryservers = function(offset)
{
window.$("#librarysearchinput").blur();
var query = window.$("#librarysearchinput").val();
if (query !== "")
{
if (sonicservers.length > 0)
{
if (!libraryisdynamic)
libraryserverid = selectedsonicserverid;
remoteapp.searchserver(libraryserverid, query + "*", {songCount: 51}, function(results)
{
var htmlout = "";
var buttonhtml = "";
if (results && results.success)
{
var i;
librarysearchresults = results.response;
htmlout += "<li data-role=\"list-divider\">Artists</li>";
for (i in librarysearchresults.artists)
htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
if (countProperties(librarysearchresults.artists) > 1) // just set to 1 for testing
buttonhtml += "Show More";
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);
window.$("#showmoreartists").html(buttonhtml).trigger('create');
}
});
}
}
};
This generates the following html:
<li data-role=\"list-divider\">Artists</li>
<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>
And for the button:
Show More
This all seems fine, and in fact shows up fine, but when I click show more it basically does the same thing as the initial result except taking the offset into account:
this.showmoreartists = function(query, offset)
{
var htmlout = "";
var buttonhtml = "";
remoteapp.searchserver(selectedsonicserverid, query + "*", {artistOffset: offset}, function(results)
{
librarysearchresults = results.response;
for (var i in librarysearchresults.artists)
htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
if (countProperties(librarysearchresults.artists) > 1) //just set to 1 for testing
{
buttonhtml += "Show More";
}
else
{
window.$("#showmorebutton").hide();
}
window.$("#showmoreartists").html(buttonhtml).trigger('create');
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);
});
};
The newly generated html that it appends to "libraryartistresults" seems fine, (the results are the same due to the testing setup, it should be a moot point for this problem though since the listview shouldn't care about it being the same.
<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>
The button html looks fine too:
Show More
I've even tried using the "style="white-space:normal;" in the UL.
TL:DR here's the code I believe to have the most relevance
STATIC HTML:
<ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
<div id="showmoreartists"></div>
HTML UPDATE:
window.$("#showmoreartists").html(buttonhtml).trigger('create');
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);
GENERATED HTML SAMPLE:
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>
It's probably some simple oversight but at this point I'm stuck. I'll keep digging around, maybe the append is placing the <li> after the </ul>
And thanks for reading this if you did, it was a long post I know and I appreciate you taking the time to just get through it all.
Well I'll be damned...the answer was extremely simple:
Change window.$("#libraryartistresults").listview('refresh', true);
to: window.$("#libraryartistresults").listview('refresh');
So...not sure if it's due to jQM 1.2, or some weird stuff going on with my framework or something but it fixed it 100%.
I'd like to give a special thanks to ezanker for taking his time to analyze and write up a JSFiddle example for me to work with.
Related
I am trying to store an image in a json object and display it on a html page with the rest of the data in the object. The image is stored locally in a folder called images. I have some code, but it doesnt seem to work... Can anyone please advise?
"photo":"<img src=images/audir8.jpg"
their is missing a closing ">" tag
Update you json like this
{
"id":2,
"name":"Audi A4",
"make":"Audi",
"model":"A4",
"enginesize":"1968cc",
"power":"140 BHP",
"acceleration":"7.8 seconds",
"topspeed":"139 MPH",
"drivetrain":"Front-wheel drive",
"specification":"Sat Nav, Heated Seats, Convertible, Immobiliser, Traction Control, Metallic paint, Airbags, LED lights",
"photo":"images/audir8.jpg"
}
html
<h1 id="title"></h1>
<ul>
<h2>Performance</h2>
<ul id="make"></ul>
<ul id="model"></ul>
<ul id="enginesize"></ul>
<ul id="power"></ul>
<ul id="acceleration"></ul>
<ul id="topspeed"></ul>
<ul id="drivetrain"></ul>
<ul id="specification"></ul>
<ul ><img id="photo" />
</ul>
</ul>
<script src="js/details.js"></script>
</div>
</div>
javascript
function populateContent(car)
{
titleEl=document.getElementById("title");
makeEL=document.getElementById("make");
modelEl=document.getElementById("model");
enginesizeEl=document.getElementById("enginesize");
powerEl=document.getElementById("power");
accelerationEl=document.getElementById("acceleration");
topspeedEl=document.getElementById("topspeed");
drivetrainEl=document.getElementById("drivetrain");
specificationEl=document.getElementById("specification");
photoEl=document.getElementById("photo");
//document.getElementById("imageid").src="../images/audir8.png";
titleEl.innerHTML = car.name;
makeEL.innerHTML = "<b>Make: </b>"+car.make;
modelEl.innerHTML = "<b>Model: </b>"+car.model;
enginesizeEl.innerHTML = "<b>Engine Size: </b>"+car.enginesize;
powerEl.innerHTML = "<b>Power: </b>"+car.power;
accelerationEl.innerHTML = "<b>0-60: </b>"+car.acceleration;
topspeedEl.innerHTML = "<b>Top Speed: </b>"+car.topspeed;
drivetrainEl.innerHTML = "<b>Drivetrain: </b>"+car.drivetrain;
specificationEl.innerHTML = "<h2>Specification: </h2>"+car.specification;
photoEl.src= car.photo;
}
You are missing the closing of image tag />. Add that and it will work. For demonstration I have used a live URL for the image. You can replace that with yours. Also, <ul> has <li> elements so replace that too.
var jsonData = {
"id":2,
"name":"Audi A4",
"make":"Audi",
"model":"A4",
"enginesize":"1968cc",
"power":"140 BHP",
"acceleration":"7.8 seconds",
"topspeed":"139 MPH",
"drivetrain":"Front-wheel drive",
"specification":"Sat Nav, Heated Seats, Convertible, Immobiliser, Traction Control, Metallic paint, Airbags, LED lights",
"photo":"<img src=http://myanmareiti.org/sites/default/files/styles/medium_retina/public/sample-5_0.jpg?itok=wn8qRWZM />"
};
function populateContent(car)
{
titleEl=document.getElementById("title");
makeEL=document.getElementById("make");
modelEl=document.getElementById("model");
enginesizeEl=document.getElementById("enginesize");
powerEl=document.getElementById("power");
accelerationEl=document.getElementById("acceleration");
topspeedEl=document.getElementById("topspeed");
drivetrainEl=document.getElementById("drivetrain");
specificationEl=document.getElementById("specification");
photoEl=document.getElementById("photo");
//document.getElementById("imageid").src="../images/audir8.png";
titleEl.innerHTML = car.name;
makeEL.innerHTML = "<b>Make: </b>"+car.make;
modelEl.innerHTML = "<b>Model: </b>"+car.model;
enginesizeEl.innerHTML = "<b>Engine Size: </b>"+car.enginesize;
powerEl.innerHTML = "<b>Power: </b>"+car.power;
accelerationEl.innerHTML = "<b>0-60: </b>"+car.acceleration;
topspeedEl.innerHTML = "<b>Top Speed: </b>"+car.topspeed;
drivetrainEl.innerHTML = "<b>Drivetrain: </b>"+car.drivetrain;
specificationEl.innerHTML = "<h2>Specification: </h2>"+car.specification;
photoEl.innerHTML = "<h2>photo: </h2>"+car.photo;
}
populateContent(jsonData);
<h1 id="title"></h1>
<ul>
<h2>Performance</h2>
<li id="make"></li>
<li id="model"></li>
<li id="enginesize"></li>
<li id="power"></li>
<li id="acceleration"></li>
<li id="topspeed"></li>
<li id="drivetrain"></li>
<li id="specification"></li>
<li id="photo"></li>
</ul>
So I have a tabbed menu with an arrow below that should move when I click on a specific tab.I am using pure JavaScript for the tabs and jQuery to move the arrow. The problem is that this works only when I delete one of the scripts. If I delete the jQuery script, the tabs are working and viceversa. Has anyone any idea what the problem may be? Here is the HTML
<div class="item active">
<ul class="tabbed-menu menu-list">
<li>Consultanță IT</li>
<li>Managementul Relațiilor cu Clienții</li>
<li>Business Intelligence</li>
<li>Turism și Ospitalitate</li>
<li>Finanțe și Bănci</li>
<li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
</ul>
</div> <!--/.item active-->
<div class="item">
<ul class="tabbed-menu menu-list">
<li><a class="left carousel-control" href="#services-carousel" role="button" data-slide="prev"><img src="images/left-arrow.png" alt="">Inapoi</a></li>
<li>Educatie</li>
<li>eCommerce</li>
<li>eLearning</li>
<li>Website</li>
<li>mCommerce</li>
</ul>
</div> <!--/.item-->`
Javascript
function rudrSwitchTab(rudr_tab_id, rudr_tab_content) {
// first of all we get all tab content blocks
var x = document.getElementsByClassName("tabcontent");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none'; // hide all tab content
}
document.getElementById(rudr_tab_content).style.display = 'block'; // display the content of the tab we need
// now we get all tab menu items by class names (use the next code only if you need to highlight current tab)
var x = document.getElementsByClassName("tabmenu");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = 'tabmenu';
}
document.getElementById(rudr_tab_id).className = 'tabmenu active';
}
and jQ
$(document).ready(function(){
$('ul.menu-list li' ).click(function(event) {
var position = $(this).position();
var width = Math.round($(this).width()/2) - 5;
// alert(width);
$(".arrow-marker").css('left', 'auto').stop().transition({ x: position.left + width });
event.preventDefault();
})
})
Has anyone any idea what the problem may be?
You are using event.preventDefault(); in your jQuery which basically prevents the link to follow its href. So the javascript you have put in your links' href will not be executed - this is exactly what event.preventDefault(); is supposed to prevent. Sort of a name that fits :)
First please check error in console. If it is jquery conflict error.
Use these below line before start the jquery code.
$.noConflict();
Try to use the Jquery no conflict
https://api.jquery.com/jquery.noconflict/
see here to catch info of this function
<ul class="tabbed-menu menu-list">
<li>Consultanță IT</li>
<li>Managementul Relațiilor cu Clienții</li>
<li>Business Intelligence</li>
<li>Turism și Ospitalitate</li>
<li>Finanțe și Bănci</li>
<li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
</ul>
I made these changes
rudrSwitchTab($(this).attr('id'), $(this).attr('tab-id'));
event.preventDefault();
And now it all works
I have a from which is basically a multistage form see the following figure
What I want to do is the steps which are in green at the top those steps should become like a button clicking on which I can jump to that step.
Right now I am just able to go back and forward . I am not able to jump steps
Here is a JSFIDDLE
HTML
<div class="progress1">
<ul class="cf checkout-tabs breadcrumb" style="list-style:none"><span class="done1 talign-center stage-login">1</span>
<li class="active1 talign-center stage-login">2</li>
<li class="disabled talign-center stage-delivery">3</li>
<li class="disabled talign-center stage-delivery">4</li>
<li class="disabled talign-center stage-payment">5</li>
</ul>
</div>
Thanks & Regards
Working example: http://jsfiddle.net/Gajotres/ZzCA2/58/
Added code:
$(".ui-content").on("click", ".checkout-tabs li",function (e) {
var selectedTab = $(this);
$(".checkout-tabs li").each(function(index) {
if(index <= selectedTab.index()) {
$(this).addClass('active1');
if(index < selectedTab.index()) {
$(this).addClass('done1');
} else {
$(this).removeClass('done1');
}
} else if(index > selectedTab.index()) {
$(this).removeClass('active1 done1');
}
});
$(".step").each(function() {
$(this).removeClass('active').addClass("ui-screen-hidden");
});
$(".step:eq(" + selectedTab.index() + ")").removeClass('ui-screen-hidden').addClass("active");
});
You should add code that will prevent jumping to not yet enabled tabs. I hope this is what you need.
Ok this is what I need to do. Not real sure how to do it. I have a php page running index.php is my main page that loads and brings in menu.php and a few other sub files. So here is my problem. I have a drop down menu written in java and then I also have a Jquery script linked in to generate a title for the page. Whats happening is when I click the link in the menu its showing the title for a minute and then vanishes because its going to a new page. If I add a return false its stops and works, but doesn't forward you to the new page of course. So here is my problem. I need to set a variable im assuming or something to hold that value of what is clicked and take it to the new page, which i'm not sure how to do. Here is my menu code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/css-slider.css">
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script src="css/active.js" type="text/javascript">
</script>
<script src="css/drop1.js" type="text/javascript">
</script>
</script>
<!--Main Navigation Start -->
<div id="nav" class="nav">
<ul id="sddm">
<li><a class="navigation" value="home" id="Home" href="index.php" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
<div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
</div>
</li>
<li><a class="navigation" id="Station History" href="station_history.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Station History</a>
<div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
</div>
</li>
<li>
<a class="navigation" id="Apparatus" href="Apparatus.php" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Apparatus</a>
<div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a class="navigation" id="Truck History" href="truck_history.php">Truck History</a>
</div>
</li>
<li>
<a class="navigation" id="Photo Gallery" href="photos.php" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Photos</a>
<div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
</div>
</li>
<li>
<a class="navigation" id="News & Events" href="news_events.php" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">News & Events</a>
<div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
</div>
</li>
<li>
<a class="navigation" id="Station Members" href="Station_members.php" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Station Members</a>
<div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
</div>
</li>
<li>
<a class="navigation" id="Education" href="education.php" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Education</a>
<div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a class="navigation" id="Station Tours" href="">Station Tours</a>
<a class="navigation" id="Fire Extinguisher" href="">Fire Extinguisher</a>
<a class="navigation" id="First Aid & CPR" href="">First Aid & CPR</a>
<a class="navigation" id="Smoke Alarms" href="">Smoke Alarms</a>
</div>
</li>
<li>
<a class="navigation" id="Contact Us" href="contactus.php" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact Us</a>
<div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> </div>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
Here is my Jquery
//navigation
$(document).ready(function () {
//var mname = ($(this).attr('id'));
$("a.navigation").click(function () {
//alert($(this).attr('id'));
$("span#title").html($(this).attr('id'));
})
});
and here is my drop down
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
I am completely stumpped for some reason on how to do this and really would appreciate the help.
Global variables last only for the lifetime of a given page so they will not last across multiple pages. So, to pass data from one page to another, you have to store the data somewhere in the browser or server so it can be retrieved by subsequent pages.
Your options for storing or passing the data in the browser are:
Store the data in a cookie and then retrieve it from the cookie on subsequent pages.
Store the data in local storage and then retrieve from local storage on subsequent pages.
When going to the next page, encode the data in the URL you are going to (either as a query parameter or as a hash value and then retrieve that data from the URL with javascript in the next page.
Options 1 and 2 are best for data that lots of pages need to access. Cookies are supported in all versions of all browsers (though occasionally users will block them). Local storage is a little cleaner API and is supported in all modern browsers, but is not supported in some older browsers. The amount of data that can be stored per domain is more limited in cookies than local storage.
Keep in mind that options 1 and 2 only work for pages in the same domain. Cookies and local storage cannot be accessed outside the domain that stored the data.
See this article on MDN for reading/writing cookies.
See this article on MDN for reading/write local storage, including a compatibility library that falls back to cookies if local storage is not available.
Use Cookies! Here is some Javascript:
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name){
var i,x,y,ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++)
{
x = ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g,"");
if (x == c_name)
{
return unescape(y);
}
}
}
I am designing a simple jquery live search function within a widget on a site i'm developing. I have borrowed some code I found and it is working great. The problem is though that instead of using a list like this:
<ul>
<li>Searchable Item 1</li>
<li>Searchable Item 2</li>
etc
I am using a list like this:
<ul>
<li>
<a href="#">
<div class="something>
<img src="something.jpg">
<p>Searchable Item 1</p>
</div>
</a>
</li>
etc.
As you can see the text I want to search is in the p tag. The functions I have used are searching all the other stuff (a href, div, img) and matching text found in those tags as well as the item within the p tag. Sorry if my explanation is a bit confusing but I will show you an example of the code here:
//includes im using
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
<script type="text/javascript" src="js/quicksilver.js"></script>
<script type="text/javascript" src="js/jquery.livesearch.js"></script>
//document ready function
$(document).ready(function() {
$('#q').liveUpdate('#share_list').fo…
});
//actual search text input field
<input class="textInput" name="q" id="q" type="text" />
//part of the <ul> that is being searched
<ul id="share_list">
<li>
<a href="#">
<div class="element"><img src="images/social/propellercom_icon.jpg… />
<p>propeller</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/diggcom_icon.jpg" />
<p>Digg</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/delicios_icon.jpg" />
<p>delicious</p>
</div>
</a>
</li>
</ul>
also here is the jquery.livesearch.js file I am using
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
I believe the problem lies here:
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
it is just using whatever it finds between the li tags as the search term to compare against the string entered into the text input field. The search function actually does work but seems to find too many matches and is not specific as I am also using a quicksilver.js search function that matches terms that are similar according to a score. When I delete all the other stuff from the li list (a href, img, div, etc) the search function works perfectly. If anyone has any solution to this I would be really greatful, I have tried things like:
return this.children('p').innerHTML but it doesn't work, I'm ok with PHP, C++, C# etc but totally useless with javascript and Jquery, they're like foreign languages to me!
In the jquery.livesearch.js file I believe you can replace this line:
var rows = list.children('li'),
with:
var rows = list.children('li').find('p'),
This should make it so the livesearch plugin will only search the paragraph tags in your list.
You will need to change the .show()/.hide() lines to reflect that you are trying to show the parent <li> elements since you are now selecting the child <p> elements:
Change:
rows.show();//1
rows.hide();//2
jQuery(rows[ this[1] ]).show();//3
To:
rows.parents('li:first').show();//1
rows.parents('li:first').hide();//2
jQuery(rows[ this[1] ]).parents('li').show();//3