Address Search Auto Populate

4689
12
Jump to solution
04-25-2016 07:17 PM
MeganWirth
Occasional Contributor

Any suggestions on how I might be able to replicate this flex auto populate address search? I have tried using Roberts eSearch and setting the address field to unique value but with 78k records it takes awhile Thanks!

http://maps.evansvillegis.com/APC/

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Guys,

  Here is what I have. Attached you will find the LookupRestService.zip which contains the VS 2013 VB.net project. Make sure that you open VS2013 by right clicking the program icon and choosing "run as administator". When you open that project in VS on your end the main code file is called Lookup.vb. In there you will see the GetAddress function this is the only function in this project. You will see the UriTemplate:="/suggest/address?address={oAddress}". This is the back half of the url that you will use to access the function (i.e. http://gislap183/LookupRestService/suggest/address?address=%Dremie). The response from the web service will look like this: {"suggestions":["155 DREMIE DR","78 DREMIE DR","21 DREMIE DR","160 DREMIE DR","46 DREMIE DR","75 DREMIE DR"]}

In the function you will see the SQL query that is used:

cmd.CommandText = "select [STREET ADDRESS] from dbo.Main where " & "[STREET ADDRESS] like @SearchText + '%'"

So [STREET ADDRESS] is the name of the field that will be queried in the DB and dbo.Main is the table that will be queried and the "like @SearchText + '%" means that the users text with the wild card (%) at the end meaning begins with. You can add a % to the front if you wish to do a contains.

To get this connected to your database you need to edit the Web.config file. In the Web.config there is a connectionStrings parameter and the actual connection string text. This is where you have to know your data. I use SQL Server and thus the connection string is for SQL Server and the user is and password are specified in the connection string text.

If you need help with connection strings contact your DB Admin or use ConnectionStrings.com - Forgot that connection string? Get it here!

You will see that in the Web.config there is also a identity tag that have a username and password. This needs to be a user that has access to the DB and will be the user that the app runs as.

Once you have the web service up and running now you just need to consume it from your WAB app. I created a Suggest_TextBox.js dijit to do this and I added this dijit to my Parcel Search widget (just the eSearch widget customized).  When you open the Suggest_TextBox.js you will see that my webservice has a couple of other suggestion functions. There is a need to have a proxy setup on your end as the request to the web service uses the proxy.

The Suggest_TextBox.js gets added to the SingleParameter.html in the eSearch (lines 23 commented out and 24 added):

<div>
  <table style="width:100%;">
    <colgroup>
      <col width="100px" />
      <col width="auto" />
    </colgroup>
    <tbody>
      <tr data-dojo-attach-point="uniqueMessageTR" style="display: none;">
        <td colspan="2">
          <div style="margin-bottom: 8px; height: 18px;">
            <div class="uniqueBusy"></div>
            <div class="uniqueMessage" data-dojo-attach-point="uniqueMessageNode"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="prompt" data-dojo-attach-point="promptNode"></div>
        </td>
        <td>
          <div data-dojo-attach-point="allValueBoxContainer" style="width:100%;padding-bottom:2px;">
            <div data-dojo-attach-point="stringTextBoxContainer" style="display:none;">
              <!--<input data-dojo-attach-point="stringTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true" style="display:none;width:100%;height:30px;" class="dijit-form-TextBox" />-->
              <input data-dojo-attach-point="stringTextBox" data-dojo-type="widgets/eSearch/Suggest_TextBox" data-dojo-props="trim:true" style="display:none;width:100%;height:30px;" class="dijit-form-TextBox" />
              <div data-dojo-attach-point="stringCodedValuesFS" data-dojo-type="dijit/form/FilteringSelect"
                   data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>
            </div>

You also need to add the require to the SingleParameter.js file as well (line 27):

///////////////////////////////////////////////////////////////////////////
// Robert Scheitlin WAB eSearch Widget
///////////////////////////////////////////////////////////////////////////
/*global define, dojo*/
define([
  'dojo/_base/declare',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  'dojo/text!./SingleParameter.html',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/json',
  'dojo/on',
  'dojo/query',
  'dojo/Deferred',
  'dijit/form/FilteringSelect',
  'dijit/form/ValidationTextBox',
  'dijit/form/DateTextBox',
  'dijit/form/NumberTextBox',
  'dojo/store/Memory',
  'esri/request',
  './PagingQueryTask',
  'dojo/keys',
  'dojo/Evented',
  'widgets/pSearch/Suggest_TextBox'
],

As you can see this is not simple cut and paste stuff all of it will require development knowledge and modifications to suit your needs.

View solution in original post

12 Replies
RobertScheitlin__GISP
MVP Emeritus

Ryan,

  I create a .Net web service to query mySQL Server Database and return matches for the characters typed. Do you have access to visual studio?

0 Kudos
MeganWirth
Occasional Contributor

Robert thanks for the reply. I do not currently have access to visual studio but can def look into it. I'm afraid what you have created is outside my level of knowledge but i would be willing to try.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ryan,

  It will take some effort but I can try and walk you through it. First things first download VS 2013

Download Microsoft Visual Studio Express 2013 for Windows Desktop with Update 4 from Official Micros...

MeganWirth
Occasional Contributor

Ok Robert. I have installed VS 2013....I'm fearless and ready to proceed whenever you have the time sir. I appreciate it.

0 Kudos
RodWoodfordOld
Occasional Contributor III

Hi

I would also be interested in a resolution to this. A predictive text or typeahead is what we had for property address searching in our flex app, but I cant seem to get this to work successfully with eSearch, it's to slow returning the unique listing. I'm very interested in what Robert's advice will be re the setup process on this one.

Rod

RobertScheitlin__GISP
MVP Emeritus

Guys,

  I have not forgot you just need to find some free time.

0 Kudos
RodWoodfordOld
Occasional Contributor III

Hi Robert,

When your free just document a step process and I'll give it ago.

cheers

Rod

0 Kudos
MeganWirth
Occasional Contributor

No worries sir. Whenever time permits.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Guys,

  Here is what I have. Attached you will find the LookupRestService.zip which contains the VS 2013 VB.net project. Make sure that you open VS2013 by right clicking the program icon and choosing "run as administator". When you open that project in VS on your end the main code file is called Lookup.vb. In there you will see the GetAddress function this is the only function in this project. You will see the UriTemplate:="/suggest/address?address={oAddress}". This is the back half of the url that you will use to access the function (i.e. http://gislap183/LookupRestService/suggest/address?address=%Dremie). The response from the web service will look like this: {"suggestions":["155 DREMIE DR","78 DREMIE DR","21 DREMIE DR","160 DREMIE DR","46 DREMIE DR","75 DREMIE DR"]}

In the function you will see the SQL query that is used:

cmd.CommandText = "select [STREET ADDRESS] from dbo.Main where " & "[STREET ADDRESS] like @SearchText + '%'"

So [STREET ADDRESS] is the name of the field that will be queried in the DB and dbo.Main is the table that will be queried and the "like @SearchText + '%" means that the users text with the wild card (%) at the end meaning begins with. You can add a % to the front if you wish to do a contains.

To get this connected to your database you need to edit the Web.config file. In the Web.config there is a connectionStrings parameter and the actual connection string text. This is where you have to know your data. I use SQL Server and thus the connection string is for SQL Server and the user is and password are specified in the connection string text.

If you need help with connection strings contact your DB Admin or use ConnectionStrings.com - Forgot that connection string? Get it here!

You will see that in the Web.config there is also a identity tag that have a username and password. This needs to be a user that has access to the DB and will be the user that the app runs as.

Once you have the web service up and running now you just need to consume it from your WAB app. I created a Suggest_TextBox.js dijit to do this and I added this dijit to my Parcel Search widget (just the eSearch widget customized).  When you open the Suggest_TextBox.js you will see that my webservice has a couple of other suggestion functions. There is a need to have a proxy setup on your end as the request to the web service uses the proxy.

The Suggest_TextBox.js gets added to the SingleParameter.html in the eSearch (lines 23 commented out and 24 added):

<div>
  <table style="width:100%;">
    <colgroup>
      <col width="100px" />
      <col width="auto" />
    </colgroup>
    <tbody>
      <tr data-dojo-attach-point="uniqueMessageTR" style="display: none;">
        <td colspan="2">
          <div style="margin-bottom: 8px; height: 18px;">
            <div class="uniqueBusy"></div>
            <div class="uniqueMessage" data-dojo-attach-point="uniqueMessageNode"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="prompt" data-dojo-attach-point="promptNode"></div>
        </td>
        <td>
          <div data-dojo-attach-point="allValueBoxContainer" style="width:100%;padding-bottom:2px;">
            <div data-dojo-attach-point="stringTextBoxContainer" style="display:none;">
              <!--<input data-dojo-attach-point="stringTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true" style="display:none;width:100%;height:30px;" class="dijit-form-TextBox" />-->
              <input data-dojo-attach-point="stringTextBox" data-dojo-type="widgets/eSearch/Suggest_TextBox" data-dojo-props="trim:true" style="display:none;width:100%;height:30px;" class="dijit-form-TextBox" />
              <div data-dojo-attach-point="stringCodedValuesFS" data-dojo-type="dijit/form/FilteringSelect"
                   data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>
            </div>

You also need to add the require to the SingleParameter.js file as well (line 27):

///////////////////////////////////////////////////////////////////////////
// Robert Scheitlin WAB eSearch Widget
///////////////////////////////////////////////////////////////////////////
/*global define, dojo*/
define([
  'dojo/_base/declare',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  'dojo/text!./SingleParameter.html',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/json',
  'dojo/on',
  'dojo/query',
  'dojo/Deferred',
  'dijit/form/FilteringSelect',
  'dijit/form/ValidationTextBox',
  'dijit/form/DateTextBox',
  'dijit/form/NumberTextBox',
  'dojo/store/Memory',
  'esri/request',
  './PagingQueryTask',
  'dojo/keys',
  'dojo/Evented',
  'widgets/pSearch/Suggest_TextBox'
],

As you can see this is not simple cut and paste stuff all of it will require development knowledge and modifications to suit your needs.