<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>jQuery Autocomplete Plugin</title> <script type="text/javascript" src="javascript/jquery.js"></script> <script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script> <script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script> <script type='text/javascript' src='../lib/thickbox-compressed.js'></script> <script type='text/javascript' src='javascript/jquery.autocomplete.js'></script> <script type='text/javascript' src='javascript/localdata.js'></script> <link rel="stylesheet" type="text/css" href="main.css" /> <link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" /> <link rel="stylesheet" type="text/css" href="../lib/thickbox.css" /> <script type="text/javascript"> $().ready(function() { var allInputs = $(":input"); var locals ; function log(event, data, formatted) { $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result"); } function formatItem(row) { return row[0] + " (<strong>id: " + row[1] + "</strong>)"; } function formatResult(row) { return row[0].replace(/(<.+?>)/gi, ''); } $(window).load(function(){ var url='components/com_form/listlocale.php'; $.post(url,allInputs,loadLocal,"json"); });//end window load function loadLocal(itemList){ locals = itemList; alert (locals); $("#suggest13").autocomplete(locals, { minChars: 0, width: 310, //matchContains: "word", autoFill: false, formatItem: function(row, i, max) { return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]"; }/*, formatMatch: function(row, i, max) { return row.name + " " + row.to; }, formatResult: function(row) { return row.to; }*/ }); } $("#singleBirdRemote").autocomplete("components/com_form/listlocale.php", { width: 260, selectFirst: false }); $("#suggest14").autocomplete(cities, { matchContains: true, minChars: 0 }); $("#suggest3").autocomplete(cities, { multiple: true, mustMatch: true, autoFill: true }); $("#suggest4").autocomplete('components/com_form/search.php', { width: 300, multiple: true, matchContains: true, formatItem: formatItem, formatResult: formatResult }); $("#imageSearch").autocomplete("images.php", { width: 320, max: 4, highlight: false, scroll: true, scrollHeight: 300, formatItem: function(data, i, n, value) { return "<img src='images/" + value + "'/> " + value.split(".")[0]; }, formatResult: function(data, value) { return value.split(".")[0]; } }); $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], { width: 320, max: 4, highlight: false, multiple: true, multipleSeparator: " ", scroll: true, scrollHeight: 300 }); $(":text, textarea").result(log).next().click(function() { $(this).prev().search(); }); $("#singleBirdRemote").result(function(event, data, formatted) { if (data) $(this).parent().next().find("input").val(data[1]); }); $("#suggest4").result(function(event, data, formatted) { var hidden = $(this).parent().next().find(">:input"); hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]); }); $("#suggest15").autocomplete(cities, { scroll: true } ); $("#scrollChange").click(changeScrollHeight); $("#thickboxEmail").autocomplete(emails, { minChars: 0, width: 310, matchContains: true, highlightItem: false, formatItem: function(row, i, max, term) { return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: <" + row.to + "></span>"; }, formatResult: function(row) { return row.to; } }); $("#clear").click(function() { $(":input").unautocomplete(); }); }); function changeOptions(){ var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max)); if (max > 0) { $("#suggest1").setOptions({ max: max }); } } function changeScrollHeight() { var h = parseInt(window.prompt('Please type new scroll height (number in pixels):', jQuery.Autocompleter.defaults.scrollHeight)); if(h > 0) { $("#suggest1").setOptions({ scrollHeight: h }); } } function changeToMonths(){ $("#suggest1") // clear existing data .val("") // change the local data to months .setOptions({data: months}) // get the label tag .prev() // update the label tag .text("Month (local):"); } </script> </head> <body> <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Dem<a href="components/com_form/search.php">o</a></h1> <div id="content"> <form autocomplete="off"> <p> <label>E-Mail (local):</label> <input type="text" id="suggest13" /> <input type="button" value="Get Value" /> </p> <p> <label>Single Bird (remote):</label> <input type="text" id="singleBirdRemote" /> </p> <p> <label>Hidden input</label> <input type="text" id="umpher"/> </p> <p> <label>Hidden input</label> <input type="text" id="province"/> </p> <p> <label>Single City (contains):</label> <input type="text" id="suggest14" /> <input type="button" value="Get Value" /> </p> <p> <label>Multiple Cities (local):</label> <textarea id='suggest3' cols='40' rows='3'></textarea> <input type="button" value="Get Value" /> </p> <p> <label>Multiple Birds (remote):</label> <textarea id='suggest4'></textarea> <input type="button" value="Get Value" /> </p> <p> <label>Hidden input</label> <textarea></textarea> </p> <p> <label>Image search (remote):</label> <input type="text" id='imageSearch' /> <input type="button" value="Get Value" /> </p> <p> <label>Tags (local):</label> <input type="text" id='tags' /> <input type="button" value="Get Value" /> </p> <p> <label>Some dropdown (<3 IE):</label> <select> <option value="">Item 12334455</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> </select> </p> <input type="submit" value="Submit" /> </form> <p> <a href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">Click here for an autocomplete inside a thickbox window.</a> (this should work even if it is beyond the fold) </p> <div id="modalWindow" style="display: none;"> <p> <label>E-Mail (local):</label> <input type="text" id="thickboxEmail" /> <input type="button" value="Get Value" /> </p> </div> <button id="clear">Remove all autocompletes</button> <a href="search.phps">PHP script used to for remote autocomplete</a> <h3>Result:</h3> <ol id="result"></ol> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2623402-1"; urchinTracker(); </script> </body> </html>
