0

How to get search suggestions for foundations framework webapp ? If it was for bootstrap i could have used typeahead, etc but this is a foundations framework website and including bootstrap js and css is causing conflict with foundations css and js.

How can i get search suggestions (similar to typeahead for bootstrap) for a foundations website

Abhinav Pathak
  • 98
  • 8

1 Answers1

0

According to this article, auto-complete search can be implemented in Zurb Foundation using jQuery like this:

<script>
  document.write('<script src=' +
    ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>

HTML:

<div class="row">
  <div class="large-12 columns ui-widget">
  <label for="tags">Input Label</label>
  <input id="tags" type="text" placeholder="large-12.columns">
  </div>
</div>

JS:

<script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
$( "#tags" ).autocomplete({
      source: availableTags
      });
});
</script>

Also, please remember that the Proto.js and Jquery.js fallback script is absolutely key. Also that the foundation.min.js contains the Jquery library itself.

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
  • This shows suggestions as i start typing, but once i select the suggestion and submit it, only the part of the string i typed goes to the backend and not the whole suggestion which was selected from dropdown. – Abhinav Pathak Mar 30 '15 at 20:02
  • Hmmmm.... That sounds like a backend issue and not exactly front-end anymore bro. Try posting a new question for that new issue as that is a totally different issue altogether :) – AndrewL64 Mar 30 '15 at 20:06
  • I'm a front-end programmer so backend issues are out of my grasp lol – AndrewL64 Mar 30 '15 at 20:06
  • Not really, this is still a frontend issue. The text that is being sent from the above code is not the one being selected from shown suggestions, it is what was typed on the textbox and not wat was selected. So basically the jquery code u gave me is glitched somewhere since it is not submitting the suggested value – Abhinav Pathak Mar 30 '15 at 20:15
  • But anyway, just try to get some rep points of about 50+ and post a bounty for this question to get more people to see it (which means, more chance for finding a fix to it). – AndrewL64 Mar 30 '15 at 21:08