topic Re: How do I limit what is entered in the textbox when using a search widget? in ArcGIS JavaScript Maps SDK Questions

How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 15:28:22 GMT

We want to verify that only valid addresses are entered into a contact form. All valid addresses come from our Web Address Locator. How do I validate each address to ensure that it is an address that we have in our system? Otherwise I want to block the user from sending the information. In other words I only want items from the autocomplete allowed for entry.

Here is the form: Contact Information Update

Re: How do I limit what is entered in the textbox when using a search widget?

RickeyFight — Wed, 15 Jul 2015 15:45:29 GMT

Chris,

When you finish this form, you should post it on github so others can use it!

I like how it looks so far!

Re: How do I limit what is entered in the textbox when using a search widget?

SteveCole — Wed, 15 Jul 2015 16:03:06 GMT

You could add an event listener for either the oninput or onchange event for each of the address related input fields and try to geocode them in the event function. If you don't get satisfactory results back, notify the user that the address entered appears to be invalid.

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 16:10:48 GMT

I will. It's a .NET form, but it looks like I need to add GIS to it.

Re: How do I limit what is entered in the textbox when using a search widget?

TomSellsted — Fri, 10 Dec 2021 21:49:59 GMT

Chris,

We did something similar on our citizen engagement app. They would enter an address and we would check it against our locator. Further, we would check it against our city boundary to see if the point fell within our city limits. If not we would not add it to the list of available choices.

Here is some code that shows how we did this:

// Address Locator for finding stops near an address
function searchAddresses() {
  var address = {"SingleLine": $("#addrSearch").val()};
  if (address.SingleLine != "") {
  var params = {address: address, outFields:["*"]};
  geocoder.addressToLocations(params, buildAddressList, errAddress);
  } else {
  $('#addressList li').remove();
  selectedAddress = '';
  }
}


function buildAddressList(geocodeResults) {
  gcr = geocodeResults;
  $('#addressList li').remove();
  var titleLI = $('<li data-role="list-divider" data-inset="true" />');
  titleLI.append("<h3 id='addListHeader'>  Address List</h3>");
  $('#addressList').append(titleLI);
  var addCount = 0;
  $.each(gcr, function(i, a) {
  // we only want to display addresses that are in Yakima.
  var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(a.location.x, a.location.y));
  // Check to see if the point is in the Yakima City Limits
  var isYakima = yakimaCL.graphics[0].geometry.contains(pt);
  if (isYakima == true) {
  var li = $("<li />");
  if (a.attributes.Addr_type == "Address") {
  var content = "<a href='#' onClick='useAddress(" + i + ")'><h3>" + a.address + "</h3><p>" + a.attributes.User_fld + "</p><span class='ui-li-count'>" + a.score + "</span></a>";
  } else {
  var addr = a.address.split(",");
  var content = "<a href='#' onClick='useAddress(" + i + ")'>" + addr[0] + "<span class='ui-li-count'>" + a.score + "</span></a>";
  }
  li.append(content);
  //add the list item to the feature type list
  $('#addressList').append(li);
  addCount += 1;
  }
  });
  //refresh the featurelist so the jquery mobile style is applied
  $('#addressList').listview('refresh');
  $("#addListHeader").html("  " + addCount + " found in Yakima");
}

I hope this is helpful.

Regards,

Tom

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 16:14:35 GMT

I went here: Search | API Reference | ArcGIS API for JavaScript but don't see those two events. Do you thinks search(value?) would work after the text is entered, or is onchange available in JavaScript in general?

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 16:18:15 GMT

This looks like what I want. Do you have a complete code sample so I could reference it as a template?

Re: How do I limit what is entered in the textbox when using a search widget?

TomSellsted — Wed, 15 Jul 2015 16:25:51 GMT

Chris,

Yes sir! You can directly look at the JavaScript at:

http://www.yakimawa.gov/apps/yak-back/includes/js/map.js

This was written in 2012, before we had fully embraced AMD. It is still being used today, but ready for a rewrite.

The complete app is at:

Yak Back

Please let me know if I can be of any further assistance!

Regards,

Tom

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSmith7 — Wed, 15 Jul 2015 16:34:43 GMT

Chris,

I have had to do stuff like this outside of the ArcGIS JS API in .NET. Just to give you an idea if you're using .NET and SQL Server...

Basically, it's autocomplete with validation. We used a .NET handler (.ashx - HTTP Handlers and HTTP Modules Overview). As the user types, a stored procedure in SQL would be called to pull a list of matched recommendations based on their search string. It's similar to how this person is doing it here:

autocomplete - auto complete textbox using jquery UI in vb.net - Stack Overflow

They are using in-line SQL, though (yuck) - but you get the idea. As for the validation, I would be careful interrupting the user while they are typing, but maybe add a notification to the page and highlight the field, or something like that, then disable the form submit button until they enter a valid, autocompleted value. The link I gave - it doesn't look like they are doing any validation.

Here's some info on preventing free text:

jquery - Autocomplete disallow free text entry? - Stack Overflow

Source looks to support multiple types, including the .NET handler so long as it returns JSON.

http://api.jqueryui.com/autocomplete/#option-source

Here's info on returning JSON from a .NET handler:

How to implement jquery autocomplete with JSON rsponse from ashx | The ASP.NET Forums

In summary, it looks like you could use the jQuery UI widget, then, source it to a .NET handler that calls a proc as the user types, which then returns a JSON object. If you go that route, you'll need jQuery base, then JQuery UI on top of that.

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSmith7 — Wed, 15 Jul 2015 16:48:54 GMT

Here's a JS Fiddle example I put together showing you how to prevent free text (defacto validation):

Edit fiddle - JSFiddle

I'm simply using an array of values for the source - you'll have to replace with the ashx!

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 17:52:48 GMT

This is awesome. Do you have it on Github as well? I wouldn't mind downloading the package.

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 17:54:43 GMT

I am going to try to do it with just JavaScript for now, but this is some excellent information.

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 17:55:39 GMT

I tried to enter my name, but I wanted it to invalidate that once I did; might need to extend it if I go .NET based on a button click event to see if an item is in the list.

Re: How do I limit what is entered in the textbox when using a search widget?

TomSellsted — Wed, 15 Jul 2015 17:58:14 GMT

Chris,

Not at present. We will get it posted up later today.

Regards,

Tom

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 18:06:27 GMT

Awesome! Just a sidebar; going to the UC?

Re: How do I limit what is entered in the textbox when using a search widget?

TomSellsted — Wed, 15 Jul 2015 18:10:43 GMT

Chris,

Yes! I am really looking forward to this years UC. I know that they are getting ready to release the latest version of JS API and also the new 4.0 beta. I am really interested in working on some 3D web projects too.

Are you also attending?

Regards,

Tom

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSmith7 — Wed, 15 Jul 2015 18:16:45 GMT

3D should be really interesting - I'm looking forward to that.

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 18:24:09 GMT

Yes,

I am attending. I also will be presenting at the DevMeetup a project that I have gotten a lot of help on here with. Finishing up some final pieces that I hope to have ready in time. But, it's looking good.

Re: How do I limit what is entered in the textbox when using a search widget?

williamcarr — Wed, 15 Jul 2015 18:42:52 GMT

See you there, Chris!

Re: How do I limit what is entered in the textbox when using a search widget?

ChrisSergent — Wed, 15 Jul 2015 18:50:11 GMT

Will do.