listing result template is not showing

[getlose]

I am implement this code on my ionic project.
suggestion seem well because went i push down button, it automatically fill the texbox.
but the preview template of list is not showing.
Here is my code

Html

<label mass-autocomplete class="item item-input-inset item-floating-label">                                  
          <span  class="input-label">City</span>                                                                                   
          <input type="text" ng-model="buildcity" mass-autocomplete-item="autocomplete_options" placeholder="City">                                              
</label>

js

var states = [];      

            CityService.getAll().success(function(data) {

                    for(var i=0, len=data.length; i<len; i++){                       
                        states.push(data[i].cityname);                 
                    }
            });
   function suggest_state(term) {
    var q = term.toLowerCase().trim();
    var results = [];

    // Find first 10 states that start with `term`.
    for (var i = 0; i < states.length && results.length < 10; i++) {
      var state = states[i];
      if (state.toLowerCase().indexOf(q) === 0)
        results.push({ label: state, value: state });
    }  
    return results;

  }

  $scope.autocomplete_options = {
    suggest: suggest_state
  };

[hakib]

Hey @getlose,

I don't fully understand the issue as you describe it but it seems like a CSS issue. Ionic does a lot of transclution around form elements (label is especially tricky, see their latest release notes. They completely deprecated the use of label for being too flaky). You should try and inspect the document when the suggestion box should appear and see where it is located.

[getlose]

i try to inspect the document when the suggestion box should appear.
and it is located on

any ideas how to fix this?

[hakib]

I never tried to use the plugin with ionic. As I mentioned before, ionic does a lot of voodoo when it come to positioning (depends on js/native scroll, type of element list / form etc).

You can try and fix this by applying you own styling to .ac-container. translate and z-index are probably required.

[getlose]

how about make the manual code on the view page.
like

<ion-list>
    <ion-item>

and where can i found the result value and pass it to the view?

[hakib]

The selected value is bound using ng-model so it's on your scope and you can access it the same way you access any other model field.

About using it in ionic list, I don't know I never tried :)

[getlose]

okay, thanks. I'll try to find the solutions