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. >
