Autocomplete google place search box


Hi guys, I would like to create an autocomplete search box using google place… I have tried using the autocomplete puglin but it doesn’t work…


Hey @Dangrad

It would help everyone on the forums to understand your problem when you actually specify what and in what way something just doesn't work.


The app doesn’t open the page where I have insterted the search box… no error in the console, nothing… This type of behaviour happens very often, and I have understood that it is caused by some wrong code into the page… Infact if I leave the xml relevants to the autocomplete plugin, the app opens the page


So there is certainly code associated with the behavior that you are describing… Perhaps you could share it, in a repository, so that others may see it.



  <Page loaded="loaded" xmlns:ac="nativescript-autocomplete">
    <ActionBar title="AppEtice">
     <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="back"/>

 <GridLayout columns="100,*" rows="150,100,100,100,100" >
    <StackLayout class="StackLayoutBG" col="0" row="0" colSpan="2" orientation="horizontal" >
         <image id="myImage" col="0"  class="Image"  Stretch="aspectFit" horizontalAlignment="center" src="{{ myImage }}"/>
         <TextView id="description" col="1"  text="{{ description }}" class="TextFieldPost" style="height:150;" hint="Write a description..." />
    <StackLayout class="StackLayoutBG2" col="0" row="1" colSpan="2" orientation="horizontal" >
      <Label class="Label" col="0" text="Price:" />
      <TextField  id="price" col="1"  text="{{ price }}" class="TextFieldPost" hint="Insert here..." />

    <StackLayout class="StackLayoutBG" col="0" row="2" colSpan="2" orientation="horizontal" >
      <Label  col="0" style="margin-right:5px; font-size:25px;" class="fa Label" text="{{'fa-map-marker' | fonticon}}" tap="getLocation"></Label>
      <TextField  id="place" col="1"  text="{{ place }}" class="TextFieldPost" hint="Name of the place..." onType="search" />
      <ac:Autocomplete  items="{{list}}" itemTap="itemTapped"/>
    <StackLayout class="StackLayoutBG2" col="0" row="3" colSpan="2" orientation="horizontal" >
    <Label class="Label" col="0"  text="Data:" />
    <DatePicker id="data" col="1"  class="DataPicker" day="{{ day }}" month="{{ month }}" year="{{ year }}" verticalAlignment="center" horizontalAlignment="center"/>

     <StackLayout class="StackLayoutBG" col="0" row="4" colspan="2" orientation="vertical" >
     <Button  class="Button" col="0" colSpan="2" text="Share" tap="Share"/>




So if you comment out the line where you have <ac:Autocomplete... the page opens ok? Is it possible the autocomplete plugin isn’t installed?


exactly… yes the plugin is installed correctly because into the page tag I have inserted xmlns:ac="nativescript-autocomplete" and the page still runs correctly (without <ac:Autocomplete...


I don’t see anything that jumps out at me, ping @triniwiz ? But looks like there are others having this issue:


I have the same issue with the plugin “nativescript-star-ratings” :frowning:

  1. install nativescript-google-places
    and declare var GPlaces = require(“nativescript-google-places”);

  2. in ngOnInit:

     	googleServerApiKey: 'YOUR_API_KEY',
     	language: 'es',
     	radius: '100000',
     	errorCallback: function (text) { console.log("text-> " + text) }
  3.  GPlaces.details(placeId).then((place) => {


var options[];
GPlaces.results(text,options).then((place) => {