Destramic Posted July 9, 2014 Share Posted July 9, 2014 hey guys im trying to get an autocomplete script working at the moment...although im pretty new to jquery...ive added jquery.js and jquery-ui.js (I think I need both?) here is my code if anyone can give me some pointers please...thank you <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript" src="media/scripts/library/jquery.js"></script> <script src="media/scripts/library/jquery-ui.js"></script> <script> $(document).ready(function() { function autocomplete(selecor, tags) { $( '#' . + selector).autocomplete( { source: tags }); } var availableTags = [ "ActionScript", "AppleScript", "Asp"]; autocomplete('query', availableTags); }); </script> <title></title> </head> <body> Search: <input type="text" name="q" id="query" /> </body> </html> Quote Link to comment Share on other sites More sharing options...
fastsol Posted July 9, 2014 Share Posted July 9, 2014 First thing, you misspelled selector in the function call here function autocomplete(selecor, tags) Also, you may have conflict with function names since you are calling your function autocomplete and the jquery included function is also autocomplete. You may want to change the name of your function so there is no confusion, especially later when you review the code to fix or change it and you can't understand what's going on yourself. Quote Link to comment Share on other sites More sharing options...
Destramic Posted July 9, 2014 Author Share Posted July 9, 2014 thank you...eeek spelling mistake...ok well I've change all that but it's still not functioning $(document).ready(function() { function search_autocomplete(selector, tags) { $( '#' . + selector).autocomplete( { source: tags }); } var availableTags = [ "ActionScript", "AppleScript", "Asp"]; search_autocomplete('query', availableTags); }); Quote Link to comment Share on other sites More sharing options...
fastsol Posted July 9, 2014 Share Posted July 9, 2014 Umm, how about the . I missed on this line $( '#' . + selector) That . shouldn't be there, it's not like php to concatenate. Quote Link to comment Share on other sites More sharing options...
Destramic Posted July 9, 2014 Author Share Posted July 9, 2014 thank you that works great...now when the list comes down from the input box how would I get to the options to change the format of the list please? also it generates this at the bottom of my page "3 results are available..." which I also would like to get rid of please Quote Link to comment Share on other sites More sharing options...
fastsol Posted July 9, 2014 Share Posted July 9, 2014 Do you mean the way the list looks you want to change? The easiest way if to use a custom theme that you can generate here http://jqueryui.com/themeroller/ , then you just include the download theme and link it like a normall css file on your page. As for the 3 results thing, you haven't provided any code that would generate such a thing, so no idea there. Quote Link to comment Share on other sites More sharing options...
Destramic Posted July 9, 2014 Author Share Posted July 9, 2014 yeah that is just what I need some styling..but like I said when the results drop down box appears with suggestions, for some reason further down the page it says how many results available and what result picked? Quote Link to comment Share on other sites More sharing options...
Destramic Posted July 10, 2014 Author Share Posted July 10, 2014 helpers are able to be turned off buy using this style .ui-helper-hidden-accessible { display: none } although after solving that one problem I have come across another...my unable to view my source, which might have something to do with the way I have my array? $(document).ready(function() { function search_autocomplete(selector, tags, default_value) { $('#' + selector).focus(function() { if($('#' + selector).val() == default_value) { $('#' + selector).val(''); } }); $('#' + selector).blur(function() { if($('#' + selector).val() == '') { $('#' + selector).val(default_value); } }); $('#' + selector).autocomplete( { source: tags, timeout: 0, create: function () { $(this).data('ui-autocomplete')._renderItem = function (ul, item) { return $('<li>') .append('<a>'<br>' + item.product + ' /a>') .appendTo(ul); }; } }); } var availableTags = [{"product":"XBOX 360", "Type":"Electrics"}, {"product":"XBOX One", "Type":"Electrics"}, {"product":"Nike", "Type":"Clothing & Footwear"}] search_autocomplete('query', availableTags, 'Search...'); }); what im wanting is to have the products in my array to be the source...thank you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.