Thanks John, will do.
On Nov 26, 4:27 pm, "John Resig" <[EMAIL PROTECTED]> wrote: > You should build a simple reproducible demo and post it > to:http://dev.jquery.com/ > > Which is where jQuery bugs should be sent. > > --John > > On Nov 26, 2007 7:29 AM, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > > Hi all. > > > I've built an "auto search" plugin (or live search to give it another > > name) using jQuery 1.2.1 which does an ajax call as letters are typed > > into an input box. > > > It works flawlessly in firefox, opera and safari, but in IE7 and IE6 > > jQuery fails at line 906: > > > if ( value != undefined ) elem[name] = value; > > > the value of um, value is "NaNpx" > > > I've done some digging around the web and a have found mention of this > > problem ( here:http://dev.jquery.com/ticket/1861), but without any > > fixes. As far as I can work it it stems from IE returning some border > > measurements as non-integers ("medium" for example"). I am explicitly > > setting my borders to pixel values so I'm not sure if this is relevant > > to my problem. > > > Here's my code: > > > HTML: > > > <html> > > <head> > > <title>Autosearch demo</title> > > <script src='js/jquery-1.2.1.js'></script> > > <script src='js/f8.jquery.autosearch.js'></script> > > <link rel='stylesheet' type='text/css' href='css/ > > f8.jquery.autosearch.css'> > > > <script> > > $(document).ready(function () { > > > $("#search").autosearch("rpc.php"); > > > }); > > </script> > > > <style> > > * { > > margin: 0; > > padding: 0; > > border: 0; > > } > > html { > > font-family: verdana, sans-serif; > > } > > body { > > margin: 1em; > > } > > > fieldset { > > padding: .25em; > > } > > </style> > > </head> > > <body> > > <h1>Autosearch demo</h1> > > <form> > > <fieldset> > > <legend>search</legend> > > <div><label for='search'>search for</label> <input > > id='search' > > name='search1' type='text' /></div> > > </fieldset> > > </form> > > </body> > > </html> > > > f8.jquery.autosearch.js: > > > /** > > * autosearch > > * uses ajax to peform as you type search queries > > * @usage: $("#input_box").autosearch(url); > > */ > > jQuery.fn.autosearch = function(url) { > > > var timeout = undefined; // used to ensure queries are sent only > > when > > typing has stopped > > > var delay = 500; // delay (in ms) after the last keystroke to wait > > before we do the ajax call > > > var last_search = undefined; // stores last search query to cut down > > on roundtrips > > > var $input = $(this); // input element > > > // append the hidden search results container to the dom after the > > input element > > var $result = $("<ul class='autosearch_result'></ > > ul>").hide().css("position", "absolute").insertAfter($input); > > > // switch off the browser auto complete for the input box > > $input.attr("autocomplete", "off").addClass("autosearch_input"); > > > $input.blur(function () { > > > setTimeout(function() { > > $result.hide()}, 200 > > ); > > > }); > > > // bind the ajax call to the input box key up event > > $input.keyup(function() { > > > if(timeout != undefined) { > > clearTimeout(timeout); > > } > > > if (last_search != $input.val()) { > > > // new search is different to the last search > > > timeout = setTimeout(function() { > > > timeout = undefined; > > ajax_search(); > > last_search = $input.val(); // remember > > this search so we don't do > > it again next time > > > }, delay); > > > } > > > }); > > > function ajax_search() { > > > $result.hide().empty(); > > > if ($input.val() != "") { > > > // only search if we have something to search for > > > $input.addClass("autosearch_loading"); // adds the > > ajax anim to the > > input box > > > // perform the ajax call > > $.ajax({ > > > url: url + "?q="+$input.val(), > > > success: function(data) { > > > if ($.trim(data) == "") { > > > $result.hide(); > > > } > > else { > > > // append the results to > > the results container > > $result.append(data); > > > // re-position the results > > container in case the dom has changed > > > var pos = > > findPos(document.getElementById($input.attr("id"))); > > > $result.css({ > > top: (pos.y + > > $input.offsetHeight) + "px", > > left: pos.x + "px" > > }).show(); > > > } > > > }, > > complete: function () { > > // hide the ajax anim > > > > $input.removeClass("autosearch_loading"); > > } > > > }); > > > } > > > } > > > /** > > * works out the screen position of an element > > */ > > function findPos(obj) { > > > var curleft = obj.offsetLeft || 0; > > var curtop = obj.offsetTop || 0; > > > // work our way back up the dom till we have no more parents > > while (obj = obj.offsetParent) { > > > curleft += obj.offsetLeft > > curtop += obj.offsetTop > > > } > > > return { > > x:curleft, > > y:curtop > > }; > > > } > > > } > > > f8.jquery.autosearch.css: > > > .autosearch_input { > > border: 1px solid #CCC; > > padding: 1px 18px 1px 1px; > > } > > .autosearch_result { > > width: 20em; > > border: 1px solid #CCC; > > background: #FFF; > > list-style: none; > > font-size: .8em; > > } > > .autosearch_result li { > > border-bottom: 1px solid #CCC; > > padding: 2px; > > } > > .autosearch_result h2 { > > font-size: 1em; > > } > > .autosearch_result p { > > margin-left: 1em; > > font-style: italic; > > } > > .autosearch_loading { > > background: url(../img/indicator.gif) no-repeat top right; > > } > > > I had a dig around in the jQuery source (great work by the way guys!) > > and tried the following fix: > > > if ( value != undefined && value != "NaNpx") > > elem[name] = value; > > > Which stops the error, but my popup window is now appearing over the > > top of the input box. > > > I've tried the latest nightly build and still get the same error. > > > Any help resolving this would be greatly appreciated. > > > Thanks in advance, > > Richard.
