GooglePlace AutoComplete on RadTextBoxControl

4 posts, 0 answers
  1. Jean-Charles
    Jean-Charles avatar
    7 posts
    Member since:
    Jun 2018

    Posted 09 Jul 2018 Link to this post

    Private Sub AddAutoCompleteItems()
     
         Me.RadTextBoxControl1.AutoCompleteMode = AutoCompleteMode.Suggest
         Dim resultgoogle As RadListDataItemCollection = RadTextBoxControl1.AutoCompleteItems
         Dim value As String = RadTextBoxControl1.Text
         Dim url As String = "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=" & value & "&types=establishment&language=fr&key=YOURAPIKEY"
         Dim request As WebRequest = WebRequest.Create(url)
         Dim response As HttpWebResponse = request.GetResponse()
         Dim responseStream As Stream = response.GetResponseStream()
         Dim reader As New StreamReader(responseStream)
         Dim jsonData As String = reader.ReadToEnd()
         Dim jResults As JObject = JObject.Parse(jsonData)
         Dim data As List(Of JToken) = jResults.Children().ToList
     
         reader.Close()
     
         For Each item As JProperty In data
             item.CreateReader()
             Select Case item.Name
                 Case "predictions"
     
                     For Each msg As JObject In item.Values
                         If resultgoogle.Contains(msg("description")) Then
                             'nothing
                         Else
                             resultgoogle.Add(New RadListDataItem(msg("description")))
                         End If
                     Next
             End Select
         Next
     
         If RadTextBoxControl1.Text = "" Then
             resultgoogle.Clear()
         End If
     
     End Sub
     
     Private Sub RadTextBoxControl1_TextChanged(sender As Object, e As EventArgs) Handles RadTextBoxControl1.TextChanged
         AddAutoCompleteItems()
     End Sub

     

    If you have a more efficient solution to limit requests on the google API, do not hesitate to share.

     

    JC

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3412 posts

    Posted 10 Jul 2018 Link to this post

    Hello, Jean-Charles,   

    According to the provided code snippet it seems to be a solution for populating the autocomplete items in RadAutoCompleteBox while you are typing. We have a Knowledge Base article introducing a similar approach but for RadDropDownList. You can simply hide the arrow button and leave only the editable part. Here is the article for your reference: https://www.telerik.com/support/kb/winforms/dropdown-checkeddropdown-and-list/details/server-side-auto-complete-for-raddropdownlist

    I hope this information helps. If you have any additional questions, please let me know.  
     
    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jean-Charles
    Jean-Charles avatar
    7 posts
    Member since:
    Jun 2018

    Posted 10 Jul 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess,

    This code is beautiful and breathes the performance!
    An help to adapt it to my need would be welcome.

     

    JC

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3412 posts

    Posted 12 Jul 2018 Link to this post

    Hello, Jean-Charles,    

    In order to reduce the requests on the google API, you can extract all items once when loading the application and store the records in an appropriate collection. Thus, when changing the text in the control you have chosen, you can use the already stored collection and don't extract any information from google.

    The referred KB approach is applicable only for RadDropDownList because it has a completely different implementation compared to RadAutoCompleteBox. Hence, if you need to use the approach from the KB, feel free to use a RadDropDownList and simply set the hide the arrow by setting the DropDownListElement.ArrowButton.Visibility property to Collapsed. Otherwise, use the RadAutoCompleteBox and cache all records when loading the application in order to reduce the requests.

    I hope this information helps. If you have any additional questions, please let me know.  
     
    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top