Search code examples
javascripttizen-web-app

How to get suggestions(auto complete) from database in parse.com using javascript on filling a form,example for car manufacturers?


I am creating an app in where a user have to enter their car details.I've created a form and have successfully able to update the input datas into the database on Parse.com.I want to use the database in parse.com to create auto complete suggestions as drop down on typing.


Solution

  • We use jQuery and Javascript to create this HTML code

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <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>
    

    For the strings in the availableTags[] array, a parse.com cloud code loops through all the "suggestions" in the parse.com classes and stream them to the client's browser.

    An real life example is available for your review at https://formgram.parseapp.com/formPage?formObjectId=KjuAOvq57n&formInstanceObjectId=Mb5iZfiWX6

    The state field is an autocomplete field. Currently, only 4 states have been added to this autocomplete.

    You can even add more states to this autocomplete if you'd like by simply typing in the name of another state at https://formgram.parseapp.com/formPage?formObjectId=twDYgj32wK

    If you need additional help, let me know.

    More details are available at http://jqueryui.com/autocomplete/