Search code examples
javascriptjqueryjquery-mobileautocompleteonsen-ui

How to use autocomplete with onsen-ui?

I am building a mobile application with Onsen-ui, which is built on AngularJS, which I am not familiar with. I would like to use a remote autocomplete on a search bar and to populate an ons-list with the results.

I walked through the documentation and I couldn't find anything related to autocomplete, just ons-lazy-repeat which is good, but it's not possible to filter the results with a search input.

I know I can use jQuery or jQuery Mobile, but having imported the required files I still get the error: 'autocomplete is not a function', and the pages won't show any jQuery Mobile elements.

Theese are my imports:

<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">  

<script src="components/monaca-onsenui/js/onsenui_all.min.js"></script>
<link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">

<script src="components/monaca-jquery/jquery.js"></script>
<script src="components/monaca-jquery-mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="components/monaca-jquery-mobile/css/jquery.mobile.structure.css">

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="js/app.js"></script>

Is there any way to make jQuery UI or jQuery Mobile work with Onsen-ui, or to create the autocomplete with AngularJS or in any kind of way?

Solution

  • Trust me it's not that complicated.

    First you don't need jQuery for this. jQuery Mobile can't even work with OnsenUI.

    Take a look at this link: http://www.gajotres.net/ionic-framework-tutorial-5-master-detail-pattern/

    Disclosure it's my personal blog post. You will find an easy working example showing you how to use Master-Detail pattern with OnsenUI.

    You should be interested in the first part of that article.

    In it, I'm using a remote API to collect remote data and show them inside a list component. Fundamentally, anything you write into a search box will return as a filtered result set.

    P.S.

    You can't use jQuery Mobile with OnsenUI, both of them are mobile UI frameworks. Never mix them together, there's no point.

    While OnsenUI supports jQuery try using it minimally. OnsenUI was built to work with AngularJS so that's what you should learn.

    My advice, watch this: https://www.youtube.com/watch?v=TRrL5j3MIvo. You'll forget all about jQuery after watching that video.