Need more details implementation for newbie

Jqo's Avatar

Jqo

23 Aug, 2013 11:10 AM

I'm newbie in Jquery. However I'm interested with this plugin. I follow the instruction but it seems not working on my side. It would be great if the video explain about how to use it .

Below is my implementation :
<header>
 <link rel="stylesheet" href="/templates/autoSuggest.css" type="text/css" />
<script type="text/javascript" src="/media/js/jquery.autoSuggest.js"></script>
<script type="text/javascript" src="/media/js/jquery.autoSuggest.minified.js"></script>
<script type="text/javascript" src="/media/js/jquery.autoSuggest.packed.js"></script>
<script type="text/javascript">
  $(function(){
if($("#as-input-014").length>0)
{
   var data = {items: [
{value: "21", name: "Mick Jagger"},
{value: "43", name: "Johnny Storm"},
{value: "46", name: "Richard Hatch"},
{value: "54", name: "Kelly Slater"},
{value: "55", name: "Rudy Hamilton"},
{value: "79", name: "Michael Jordan"}
]};
$("#as-input-014").autoSuggest(data.items);
}
});
</script>
</header>
<body>
<ul class="as-selections" id="as-selections-014">
  <li class="as-original" id="as-original-014">
    <input type="text" id="as-input-014" class="as-input">
  </li>
</ul>
</body>

  1. 1 Posted by Jqo on 23 Aug, 2013 03:50 PM

    Jqo's Avatar

    It works well now !
    I implement it on my joomla 3.0 . I write this code on Joomla article with Sourcerer (need to install this plugin first - http://www.youtube.com/watch?v=XgJmUo3BtrQ ).
    Step by step :

    1. Put css file on index.php of Joomla template
    <link href="<?php echo $this->baseurl ?>/templates/evalab/css/autoSuggest.css" rel='stylesheet' type='text/css'>

    2. Insert code on sourcerer (make sure that all of the files are available . Need to apply jquery.js as well ) :
    {source}
    <ul class="as-selections">
      <li class="as-original">
        <input type="text" autocomplete="off" class="as-input">
      </li>
    </ul>
    <script src="media/jui/js/jquery.js"></script>
    <script src="media/jui/js/jquery.autoSuggest.js"></script>
    <script>
      $(function(){
      var data = {items: [
        {value: "21", name: "Mick Jagger"},
        {value: "43", name: "Johnny Storm"},
        {value: "46", name: "Richard Hatch"},
        {value: "54", name: "Kelly Slater"},
        {value: "55", name: "Rudy Hamilton"},
        {value: "79", name: "Michael Jordan"}
        ]};
      $(".as-input").autoSuggest(data.items,{selectedItemProp: "name", searchObjProps: "name"});
    });
      </script>
    {/source}

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac