Hey, guys. I'm been pulling my hair for quite a while. Basically, I have serious issues with Jörn's autocompleter and it's all my fault I think, but I really can't point out what's causing the error.
The expected functionality is like this ----------------------------------------------- 1. User enters textbox #media_ 2. The textbox's text is selected 3. User begins selecting from the list, let's say "Cinderella". 4. "Cinderella" gets selected in the text box and a thumbnail is shown in a div below the input box 5. The id of Cinderella (see object array list below) is set to #media 6. User continues, #media_ becomes out of focus Some default behavior are included ----------------------------------------------- IF the textbox's text are deleted by the user and steps on to step 6, #media_ text becomes "No media" and #media_ becomes "0". Actual behavior ----------------------------------------------- Works for all "title" strings in the object array, EXCEPT for those which holds a comma sign, eg. "Baddbaddrens, DBS". What happens is that the title gets selected and when I step out of the UI element (click or tab to next) the text in #media_ get's wiped out, but #media still holds its value. I also have a hard time trying to locate the issue with the console. The behavior is equal for a similar autocompleter I have for the customer (if the customer name has a comma sign). I've modified Jörn's example of email selection and included a couple of comma sign in the data set, but it turned out alright, so the glitch must be on my side... Would be most grateful for a quick resolution on this one! Thanks in advance! Jonas Source code included below ----------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml"; lang="sv"><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>System - add document</title> <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="base.css"> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript" src="/lib/jquery.js"></script> <link rel="stylesheet" type="text/css" href="/css/ jquery.autocomplete.css" /> <script type='text/javascript' src='/lib/jquery.autocomplete.js'></ script> <script type='text/javascript' src='/lib/jquery.bgiframe.min.js'></ script> <script type='text/javascript' src='/lib/jquery.dimensions.js'></ script> <link rel="stylesheet" type="text/css" href="ui.css"> <script type="text/javascript"> var mediasJS = [ { title: "No media", id: "0", thumb: "nomedia.jpg"}, { title: "Cinderella", id: "33", thumb: "pepparkaka.png"}, { title: "Andersons", id: "34", thumb: "anderssons.png"}, { title: "Baddbaddrens, DBS", id: "35", thumb: "baddbaddrens.png"}, { title: "Baddbaddrens ali", id: "36", thumb: "machuset-ipod.png"}, { title: "Bilpunkten", id: "39", thumb: "bilpunkten.png"}, ]; </script> <script type="text/javascript"> $().ready(function() { $("#media_").autocomplete(mediasJS, { minChars: 2, width: 400, highlight: false, scroll: true, scrollHeight: 300, matchContains: true, mustMatch: true, formatItem: function(row, i, max) { return "<img src='/multimedia/" + row.thumb + "'/> " + row.title + " (id: " + row.id + ")"; }, formatMatch: function(row, i, max) { return row.title; }, formatResult: function(row) { return row.title; } }); $("#media_").result(function(event, data, formatted) { if (data){ $("#media").val(data["id"]); $("#media_").val(data["title"]); /* No major difference with this one included or not */ $("#mediathumb").css("background", "url('/ multimedia/"+data["thumb"]+"') no-repeat"); $("#mediathumb").show("highlight"); console.log("media-result-data:"+$("#media").val()); console.log("media_-result--:"+$("#media_").val()); } console.log("media_-result:"+$("#media_").val()); }); $("#media_").blur(function () { if( $(this).val()=="" ){ $(this).val("No media"); $("#media").val(0); $("#mediathumb").hide("drop"); $("#mediathumb").css("background", "none"); console.log("media_-blur:"+$("#media_").val()); } return false; /* no difference if this one is included or not */ }); $("#media_").focus(function () { $(this).select(); }); }); $(document).ready(function(){ $("#media").val("0"); $("#media_").val("No media"); }); </script> </head><body> <div id="doc2" class="yui-t7 docbox"> <div id="hd"> <div class="docbox-tl"><div class="docbox-tr"><div class="docbox- tc"><div class="docbox-content"> </div></div></div></div> </div> <div id="bd"> <div class="docbox-cl"><div class="docbox-cr"><div class="docbox- cc"><div class="docbox-content"> <div class="yui-g"> <h1>Add new document</h1> <form method="post" enctype="multipart/form-data" action="/do/ viewCampaign/doAddCampaign"> <div class="field-wrap"> <label for="media_"><span class="mainlabel">Document</span></label> <input autocomplete="off" class="medium" id="media_" name="media_" tabindex="11" value="" type="text"> <div class="clearfix"></div> <div style="background: none; display: block;" id="mediathumb" class="media-thumb"></div> <input id="media" name="media" value="0" type="hidden"> </div> <div class="buttons" style="margin-left: 150px;"> <button type="submit" class="positive" tabindex="13"><img src="addObject-filer/tick.png" alt="">Boka annons</button> </div> </form> </div> </div></div></div></div> </div> <div id="ft"> <div class="docbox-bl"><div class="docbox-br"><div class="docbox- bc"><div class="docbox-content"> </div></div></div></div> </div> </div> </body></html>
