Apperyio Tutorial. Autocomplete in Apperyio app with jQuery.ajax

Problem:

You have big set of data you want to show, but instead of using select component or list you are seeking for alternative.

Solution:

The alternative is to implement autocomplete by this small Appery Tutorial. This solution especially usefull in forms or on pages, where you creating new entities related with other entities.
For instance you run a marketing company. You have a new client and you want to create new entity in Database and link one of your empoloyees to it. It will be better to see all results based on employees name instead of looking through all of employees.

First of all we can’t use separately jquery ui autocomplete plugin, cause it will interfere with Appery compoenents, so I found very neat plugin without pulling jquery-ui core and lots of useless stuff.

1. Open next jQuery-autoComplete link and download min.js and css files into your Appery project.
2. Add an input on the page and add a CSS class to it. Like “employeeAutocomp”.
3. Add a javascript action on page “Load” event and use code below.

This snippet based on the previous Appery tutorial Query entities Appery DB with jQuery.ajax

dbId – is your Database it, don’t forget to replace it.
Employee – is the collection where you are quering your search

Request variable in source function will have 2 characters of employee you are trying to find.

Since you are going to get objects instead of text we need to point fields we wand to show in autocomplete dropdow, for that we need renderItem function

Note that we are trying to find entity by Name collumn, this name is case sensitive.

3 thoughts on “Apperyio Tutorial. Autocomplete in Apperyio app with jQuery.ajax”

  1. Hi Igor
    I tried following your instruction but it seems to be failing on {“Name”: {“$regex”: “^” + request}}
    when you paste it into Appery. Would you be able to do a short video on this ?

    Thank you in Advance

    1. Hello Mandy,
      Thank you for your comment, I will try to make a short demo today and send you link to it after it.

  2. Hello Bismark,

    As mandy wrote it, there’s an issue in the code. Could you update it, please ?

    Thanks

    Gen

Leave a Reply

Your email address will not be published. Required fields are marked *