Autocomplete google place search box


#1

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…


#2

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.


#3

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


#4

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.


#5

Here

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

 <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> 
  
    <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>

    <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>
   
    <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>

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

  </GridLayout>

 </ScrollView>

#6

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?


#7

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...


#8

I don’t see anything that jumps out at me, ping @triniwiz ? But looks like there are others having this issue: https://github.com/triniwiz/nativescript-autocomplete/issues/11


#9

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


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

  2. in ngOnInit:

     GPlaces.init({
     	googleServerApiKey: 'YOUR_API_KEY',
     	language: 'es',
     	radius: '100000',
     	location: 'SEARCH DIRECTION ON GOOGLEMAPS AND PASTE IT',
     	errorCallback: function (text) { console.log("text-> " + text) }
     });
    
  3.  GPlaces.details(placeId).then((place) => {
    

//results
}

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