In this step-by-step tutorial, you\u2019ll learn how to integrate GeoPostcodes<\/a> data with a React<\/a> application to build a robust address autocomplete component that enhances your application\u2019s user experience.<\/p>\n\n\n\n To follow along, you need the following prerequisites:<\/p>\n\n\n\n The instructions in this tutorial are for a Windows machine. If your machine has a different operating system and a command doesn\u2019t work, you will need to replace it with the relevant command for your operating system.<\/p>\n\n\n\n To start, create a project directory named Inside the project directory, create two subdirectories named Inside the backend subdirectory, create two further subdirectories named Next, set up a Posgtres database by creating a file named docker-compose.yml<\/strong> in the This code sets up a PostgreSQL database server container with specific configurations for logging, user access, and persistent storage for data and logs.<\/p>\n\n\n\n Open a terminal and switch to the directory in which the docker-compose.yml<\/strong> file is located. Ensure that you have Docker Desktop up and running, and execute the following command to start the database in a docker container:<\/p>\n\n\n\n Execute the following command to check the status of the container:<\/p>\n\n\n\n You should see the following output:<\/p>\n\n\n\n Keep this terminal open.<\/p>\n\n\n\n Now that you have a running database, you need realistic and accurate street data that your address autocomplete feature will use. In this tutorial, you\u2019ll use a sample of US street addresses\u2014specifically the Log in to the GeoPostcodes portal and select Street database samples<\/strong> from the Download Center.<\/p>\n\n\n\n <\/p>\n\n\n\n In the next screen, download the <\/p>\n\n\n\n The downloaded file will be named something like GPC-STRT-GEO-SAMPLE-A1-SELECTED.zip<\/strong>. The postcode file contains a CSV directory, which contains our desired CSV file, GPC-STRT-GEO-SAMPLE-A1-SELECTED.csv<\/strong>. Once you have the sample street dataset (GPC-STRT-GEO-SAMPLE-A1-SELECTED.csv<\/strong>) in CSV format, you\u2019ll import this data into the Postgres database.<\/p>\n\n\n\n Execute the following command in the terminal you used earlier to log in to the database container\u2019s shell:<\/p>\n\n\n\n You will see an output similar to the one below indicating that you are inside the container\u2019s shell prompt:<\/p>\n\n\n\n Once you are in, switch the user to Log in to the Postgres database\u2019s psql prompt by executing this command:<\/p>\n\n\n\n Create a database named Switch the current database to the GeoPostcodes database you downloaded earlier by executing this command:<\/p>\n\n\n\n Create a table named This table structure complies with the GeoPostcodes street dataset file to ensure that the import operation is successful.<\/p>\n\n\n\n Execute the following command to exit from the psql prompt:<\/p>\n\n\n\n Keep this terminal open.<\/p>\n\n\n\n Open an explorer window (file browser window in Windows) in your machine and navigate to the db\u2019s data directory:<\/p>\n\n\n\n <\/p>\n\n\n\n Place the CSV file (GPC-STRT-GEO-SAMPLE-A1-SELECTED.csv<\/strong>) inside the data directory.<\/p>\n\n\n\n Switch back to the container shell terminal and execute the following command as a Postgres user:<\/p>\n\n\n\n This command imports data from the CSV file named GPC-STRT-GEO-SAMPLE-A1-SELECTED.csv<\/strong> into a table named You should see an output similar to the one below indicating that you have successfully imported the sample data into the target database table:<\/p>\n\n\n\n Now that you have the data ready to go, you\u2019ll build a backend application that will share this data with the user interface (frontend) through an API.<\/p>\n\n\n\n Open a terminal and switch to the project\u2019s Activate the virtual environment by executing the following:<\/p>\n\n\n\n Create a new file named requirements.txt<\/strong> and paste the following dependencies list in it:<\/p>\n\n\n\n Out of these many dependencies, the key ones are This app uses Execute the following command in the terminal pointing to the Create the file main.py<\/a><\/strong> in the same This Python code builds a web API for searching addresses. It connects to a PostgreSQL database with the connection string specified as part of the configuration variable The One of the import statements, as well as the code, expects a model named Next, create a file named models.py<\/a><\/strong> to include the code for the model:<\/p>\n\n\n\n This model file serves as a mapping to the database table Start the Flask app by executing the following command in the terminal pointing to the project\u2019s You should see an output similar to the one below:<\/p>\n\n\n\n You can see that the Flask application server is started and listening for requests on port 5000.<\/p>\n\n\n\n Now that you have a running backend application, you\u2019ll test whether the API retrieves the data that you expect it to.<\/p>\n\n\n\n Open a browser and paste the following URL in the address bar:<\/p>\n\n\n\n You should see an output fetching the records from the <\/p>\n\n\n\n This means that you\u2019ve successfully built and tested the backend application.<\/p>\n\n\n\n Keep the backend app running as you will need it to serve the API calls from the frontend React application.<\/p>\n\n\n\n Now that your backend is set up, you\u2019ll set up the React application with the autocomplete component to use GeoPostcodes data from your backend for accurate address suggestions.<\/p>\n\n\n\n Open a terminal and switch to the project\u2019s You should see a prompt seeking your input:<\/p>\n\n\n\n Provide As you can see, as part of the step above, a new directory named Next, edit the index.html<\/strong> file and update the Switch the terminal to the newly created React app project directory:<\/p>\n\n\n\n Install dependencies with npm:<\/p>\n\n\n\n Keep this terminal alive.<\/p>\n\n\n\n You\u2019re now ready to create the autocomplete component.<\/p>\n\n\n\n Switch to the The code above imports a React component named Create a file named AddressAutocomplete.jsx<\/strong> in the The AddressAutocomplete.jsx<\/strong> component provides a user-friendly interface for address entry. It features an input field for As the user types in a street address, the component fetches and displays address suggestions from the backend API. Upon selecting a suggestion, the component populates the corresponding Some things to note:<\/p>\n\n\n\n This tutorial uses a very simple UI screen design and logic. An alternative would be to allow users to enter the state and city, possibly using validation or autocomplete for these fields. The system can then offer more precise street suggestions. Another option could be to allow users to enter the full address (state, city, postcode, and street) in a single text field, followed by validation\u2014a more complex but streamlined option.<\/p><\/li>\n\n\n\n The You\u2019re now ready to see your app in action.<\/p>\n\n\n\n Switch to the terminal pointing to the React application and execute the following command to start the frontend application:<\/p>\n\n\n\n You should see an output like this one:<\/p>\n\n\n\n Open a browser and navigate to <\/p>\n\n\n\n If you key in the value <\/p>\n\n\n\n You can select your street of choice to see how the corresponding values of <\/p>\n\n\n\n Allowing users to input only a street name and relying on the system to predict additional details such as state, city, and postal code can result in a frustrating and inaccurate user experience. For example, across the US, there are more than 6,000 streets named \u201cMain Street\u201d and over 4,000 \u201cOak Streets.\u201d Without additional context, like city or state, the system would struggle to differentiate between them, leading to confusion or incorrect address suggestions.<\/p>\n\n\n\n A more user-friendly solution would involve first asking the user to input the state and city, using autocomplete functionality to validate and assist with these entries. Once these details are provided, the system can then narrow down the street options, making the autocomplete much more accurate and relevant to the user\u2019s location. Congratulations! You now know how to build a React address autocomplete component.<\/p>\n\n\n\n Keep in mind that your address autocomplete feature only improves user experience and data accuracy if it uses accurate and comprehensive address data to ensure that your autocomplete component delivers precise and relevant suggestions.<\/p>\n\n\n\n In this tutorial, you used GeoPostcodes\u2019 sample database, which is available with the free trial<\/a> and gave you accurate<\/em> addresses. For an actual use case, you\u2019d want to use GeoPostcodes\u2019 comprehensive database<\/a> to ensure you\u2019re working with complete<\/em> address data.<\/p>\n\n\n\n Address autocomplete simplifies user input by suggesting potential addresses as the user types.<\/p>\n\n\n\n It leverages APIs like the Google Maps JavaScript API, specifically using the Places library to return predictions based on partial inputs.<\/p>\n\n\n\n To implement address autocomplete, you need to include the Google Maps JavaScript API in your project and integrate the Places library to access the autocomplete widget.<\/p>\n\n\n\n The widget listens to user input and suggests addresses using address_components from the Places API.<\/p>\n\n\n\n Address_components are the parts of an address, such as street name, city, and postal code.<\/p>\n\n\n\n In the context of autocomplete, they help ensure the accuracy of the address suggestions by breaking down user input into manageable pieces.<\/p>\n\n\n\n Customizing the widget can be done by controlling the fields and components returned by the API.<\/p>\n\n\n\n You can specify which address fields you want to be displayed (e.g., postal codes or cities) by adjusting the autocomplete options in the maps API call.<\/p>\n\n\n\n<\/a>Prerequisites<\/h2>\n\n\n\n
\n
<\/a>Prepare the Project Directory Structure<\/h2>\n\n\n\n
react-address-autocomplete<\/code> in your machine.<\/p>\n\n\n\nbackend<\/code> and frontend<\/code> to organize the respective files and data.<\/p>\n\n\n\napp<\/code> and db<\/code>. The db<\/code> directory will contain the database-related files and data. The app<\/code> directory will contain the Python application source code.<\/p>\n\n\n\n<\/a>Set Up a Database<\/h2>\n\n\n\n
db<\/code> directory and pasting the following YAML code in it:<\/p>\n\n\n\n---\nversion: '3.9'\nservices:\n db:\n image: postgres:16\n container_name: geopostcode\n ports:\n - \"5432:5432\"\n environment:\n # default username and password\n POSTGRES_USER: postgres\n POSTGRES_PASSWORD: DontUseMeAsPassw0rd\n LOGGING_COLLECTOR: on\n LOG_DIRECTORY: \/var\/log\/postgresql\n LOG_MIN_MESSAGES: DEBUG1\n volumes:\n - .\/data:\/var\/lib\/postgresql\/data\n - .\/log:\/var\/log\/postgresql\n<\/pre>\n\n\n\n
docker compose up -d\n<\/pre>\n\n\n\n
docker ps\n<\/pre>\n\n\n\n
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES\n8d5fe173bf63 postgres:16 \"docker-entrypoint.s\u2026\" 3 days ago Up 2 seconds 0.0.0.0:5432->5432\/tcp geopostcode\n<\/pre>\n\n\n\n
<\/a>Import GeoPostcodes Data<\/h2>\n\n\n\n
North America, sample countries<\/code> dataset\u2014that are available with GeoPostcodes\u2019s free trial.<\/p>\n\n\n\n![\"Download](\"https:\/\/i.imgur.com\/EAQn8K0.png\")
<\/figure>\n\n\n\nNorth America, sample countries<\/code> dataset.<\/p>\n\n\n\n![\"Street](\"https:\/\/i.imgur.com\/5If34ra.png\")
<\/figure>\n\n\n\ndocker exec -it geopostcode bash\n<\/pre>\n\n\n\n
root@8d5fe173bf63:\/#\n<\/pre>\n\n\n\n
postgres<\/code> by executing the following command in the container\u2019s shell:<\/p>\n\n\n\nsu - postgres\n<\/pre>\n\n\n\n
psql -Upostgres\n<\/pre>\n\n\n\n
geopostcodes<\/code> by executing this SQL command:<\/p>\n\n\n\ncreate database geopostcodes;\n<\/pre>\n\n\n\n
\\c geopostcodes\n<\/pre>\n\n\n\n
address_details<\/code> by executing this SQL command:<\/p>\n\n\n\nCREATE TABLE address_details (\n iso CHAR(2) NOT NULL,\n country VARCHAR(255) NOT NULL,\n language VARCHAR(255),\n Id BIGINT PRIMARY KEY,\n region1 VARCHAR(255),\n region2 VARCHAR(255),\n region3 VARCHAR(255),\n region4 VARCHAR(255),\n locality VARCHAR(255) NOT NULL,\n postcode VARCHAR(255),\n suburb VARCHAR(255),\n street VARCHAR(255),\n range VARCHAR(255),\n building VARCHAR(255),\n latitude FLOAT,\n longitude FLOAT,\n elevation INTEGER,\n iso2 CHAR(10),\n fips VARCHAR(20),\n nuts VARCHAR(255),\n hasc VARCHAR(255),\n stat VARCHAR(255),\n timezone VARCHAR(255),\n utc INTERVAL,\n dst INTERVAL,\n locality_type VARCHAR(255)\n);\n<\/pre>\n\n\n\n
exit\n<\/pre>\n\n\n\n
![\"db-data-directory\"](\"https:\/\/i.imgur.com\/iqKhwJT.png\")
<\/figure>\n\n\n\npsql -Upostgres -d geopostcodes -c \"\\COPY address_details FROM '\/var\/lib\/postgresql\/data\/GPC-STRT-GEO-SAMPLE-A1-SELECTED.csv' DELIMITER ';' CSV HEADER;\"\n<\/pre>\n\n\n\n
address_details<\/code> within the geopostcodes<\/code> database on the PostgreSQL server. It uses semicolon (;)<\/code> as the field delimiter and recognizes the first line as containing column headers.<\/p>\n\n\n\nCOPY 200\n<\/pre>\n\n\n\n
<\/a>Setting Up the Backend API for Address Data<\/h2>\n\n\n\n
backend\/app<\/code> directory. Execute the following command to create a new Python virtual environment for the backend application development:<\/p>\n\n\n\npython -m venv venv\n<\/pre>\n\n\n\n
venv\\Scripts\\activate\n<\/pre>\n\n\n\n
blinker==1.8.2\nclick==8.1.7\ncolorama==0.4.6\nFlask==3.0.3\nFlask-Cors==4.0.1\nFlask-SQLAlchemy==3.1.1\ngreenlet==3.0.3\nimportlib_metadata==7.2.0\nitsdangerous==2.2.0\nJinja2==3.1.4\nMarkupSafe==2.1.5\npsycopg2==2.9.9\nSQLAlchemy==2.0.31\ntyping_extensions==4.12.2\nWerkzeug==3.0.3\nzipp==3.19.2\n<\/pre>\n\n\n\n
Flask<\/code>, Flask-Cors<\/code>, Flask-SQLAlchemy<\/code>, and pycopg2<\/code>. The rest are transparent dependencies to these key libraries.<\/p>\n\n\n\nFlask<\/code> as the core framework to build the backend Python application. It provides the foundation for handling requests and responses and structuring your code. The Flask-Cors<\/code> dependency allows the application to communicate with the frontend sites securely. Flask-SQLAlchemy<\/code> helps connect the Flask application to a database, simplifying interacting with databases and managing your data. Finally, psycopg2<\/code> is a database driver that allows Flask-SQLAlchemy to communicate with PostgreSQL databases. It translates between your Python code and the database language.<\/p>\n\n\n\napp<\/code> directory for installing the dependencies:<\/p>\n\n\n\npip install -r requirements.txt\n<\/pre>\n\n\n\n
app<\/code> directory and paste the following code in it:<\/p>\n\n\n\nfrom flask import Flask, jsonify, request\nfrom flask_cors import CORS\nfrom models import db, AddressDetails\n\napp = Flask(__name__)\ncors = CORS()\ncors.init_app(app)\n\n# Configure the database URI\napp.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql:\/\/postgres:DontUseMeAsPassw0rd@localhost\/geopostcodes'\napp.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False\n\ndb.init_app(app)\n\n\n@app.route('\/api\/address', methods=['GET'])\ndef get_address_details():\n street = request.args.get('street')\n if not street:\n return jsonify({'error': 'street parameter is required'}), 400\n\n # addresses = AddressDetails.query.filter_by(street=street).all()\n\n # Perform pattern-based search using ilike\n search_pattern = f\"%{street}%\"\n addresses = AddressDetails.query.filter(AddressDetails.street.ilike(search_pattern)).all()\n\n results = [{\n 'iso': address.iso,\n 'country': address.country,\n 'language': address.language,\n 'id': address.id,\n 'region1': address.region1,\n 'region2': address.region2,\n 'region3': address.region3,\n 'region4': address.region4,\n 'locality': address.locality,\n 'postcode': address.postcode,\n 'suburb': address.suburb,\n 'street': address.street,\n 'range': address.range,\n 'building': address.building,\n 'latitude': address.latitude,\n 'longitude': address.longitude,\n 'elevation': address.elevation,\n 'iso2': address.iso2,\n 'fips': address.fips,\n 'nuts': address.nuts,\n 'hasc': address.hasc,\n 'stat': address.stat,\n 'timezone': address.timezone,\n 'utc': str(address.utc),\n 'dst': str(address.dst),\n 'locality_type': address.locality_type\n } for address in addresses]\n\n return jsonify(results), 200\n\n\nif __name__ == \"__main__\":\n app.run(host='0.0.0.0', port=5000, debug=True, use_reloader=True)\n\n<\/pre>\n\n\n\nSQLALCHEMY_DATABASE_URI<\/code> and uses Flask to handle requests.<\/p>\n\n\n\n\/api\/address<\/code> endpoint allows users to search for addresses by providing a street name that is not case-sensitive. The code validates user input by ensuring the value of the parameter street<\/code> is specified and returns matching address details in JSON format if successful. The code also configures the application server to listen on port 5000 for easy testing.<\/p>\n\n\n\nAddressDetails<\/code> to be present to have a mapping of the database table.<\/p>\n\n\n\nfrom flask_sqlalchemy import SQLAlchemy\n\ndb = SQLAlchemy()\n\nclass AddressDetails(db.Model):\n __tablename__ = 'address_details'\n\n iso = db.Column(db.String(2), nullable=False)\n country = db.Column(db.String(255), nullable=False)\n language = db.Column(db.String(255))\n id = db.Column(db.BigInteger, primary_key=True)\n region1 = db.Column(db.String(255))\n region2 = db.Column(db.String(255))\n region3 = db.Column(db.String(255))\n region4 = db.Column(db.String(255))\n locality = db.Column(db.String(255), nullable=False)\n postcode = db.Column(db.String(255))\n suburb = db.Column(db.String(255))\n street = db.Column(db.String(255))\n range = db.Column(db.String(255))\n building = db.Column(db.String(255))\n latitude = db.Column(db.Float)\n longitude = db.Column(db.Float)\n elevation = db.Column(db.Integer)\n iso2 = db.Column(db.String(10))\n fips = db.Column(db.String(20))\n nuts = db.Column(db.String(255))\n hasc = db.Column(db.String(255))\n stat = db.Column(db.String(255))\n timezone = db.Column(db.String(255))\n utc = db.Column(db.Interval)\n dst = db.Column(db.Interval)\n locality_type = db.Column(db.String(255))\n\n<\/pre>\n\n\n\n
address_details<\/code> that you created earlier.<\/p>\n\n\n\n<\/a>Start the Backend Application<\/h2>\n\n\n\n
backend\/app<\/code> directory:<\/p>\n\n\n\nflask --app main.py run\n<\/pre>\n\n\n\n
* Serving Flask app 'main.py'\n * Debug mode: off\nWARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.\n * Running on http:\/\/127.0.0.1:5000\nPress CTRL+C to quit\n\n<\/pre>\n\n\n\n
<\/a>Test the API<\/h2>\n\n\n\n
http:\/\/localhost:5000\/api\/address?street=East\n<\/pre>\n\n\n\n
address_details<\/code> table in Postgres. It will be filtered by street name containing a string value of East<\/code>.<\/p>\n\n\n\n![\"API](\"https:\/\/i.imgur.com\/kvGwbHR.png\")
<\/figure>\n\n\n\n<\/a>Set Up the React Application<\/h2>\n\n\n\n
frontend<\/code> directory that you created earlier. Execute the following command to create a React template application using Vite:<\/p>\n\n\n\nnpm create vite@latest react-address-autocomplete-app -- --template react\n<\/pre>\n\n\n\n
Need to install the following packages:\ncreate-vite@5.2.3\nOk to proceed? (y) y\n<\/pre>\n\n\n\n
y<\/code> as your input. The command will get executed and the output will be as follows:<\/p>\n\n\n\nScaffolding project in C:\\Users\\admin\\Documents\\Personal\\GitHub\\react-address-autocomplete\\frontend\\react-address-autocomplete-app...\n\nDone. Now run:\n\n cd react-address-autocomplete-app\n npm install\n npm run dev\n\nnpm notice\nnpm notice New minor version of npm available! 10.2.4 -> 10.8.1\nnpm notice Changelog: https:\/\/github.com\/npm\/cli\/releases\/tag\/v10.8.1\nnpm notice Run npm install -g npm@10.8.1 to update!\nnpm notice\n\n<\/pre>\n\n\n\n
react-address-autocomplete-app<\/code> has been created. Edit the file package.json<\/strong> from this directory and add the axios<\/code> dependency in the dependencies section, as shown below:<\/p>\n\n\n\n \"dependencies\": {\n \"axios\": \"^1.7.2\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n\n<\/pre>\n\n\n\naxios<\/code> is an HTTP client library that will be used to make the API calls to the backend app you created earlier.<\/p>\n\n\n\ntitle<\/code> tag value as follows:<\/p>\n\n\n\n <title>Address Auto-Completion<\/title>\n<\/pre>\n\n\n\n
cd react-address-autocomplete-app\n<\/pre>\n\n\n\n
npm install\n<\/pre>\n\n\n\n
<\/a>Create the Autocomplete Component<\/h2>\n\n\n\n
src<\/code> directory inside react-address-autocomplete-app<\/code> and edit the App.jsx<\/strong> file. Replace the existing code there with the following:<\/p>\n\n\n\nimport AddressAutocomplete from '.\/AddressAutocomplete';\n\nconst App = () => {\n return (\n <div>\n <AddressAutocomplete \/>\n <\/div>\n );\n};\n\nexport default App;\n\n<\/pre>\n\n\n\nAddressAutocomplete<\/code> and renders it in the user interface. This component will contain the complete HTML elements and logic for address autocompletion, which is what you\u2019ll create next.<\/p>\n\n\n\nsrc<\/code> directory and paste the content below into it:<\/p>\n\n\n\nimport { useState } from 'react';\nimport axios from 'axios';\n\nconst AddressAutocomplete = () => {\n \/\/ State to store the value of the input fields\n const [inputValue, setInputValue] = useState('');\n const [city, setCity] = useState('');\n const [state, setState] = useState('');\n const [postCode, setPostCode] = useState('');\n\n \/\/ State to store the fetched suggestions\n const [suggestions, setSuggestions] = useState([]);\n \/\/ State to manage loading state\n const [isLoading, setIsLoading] = useState(false);\n\n \/**\n * Fetch suggestions from the backend API based on the input query.\n *\n * @param {string} query - The input value to search for.\n *\/ \n const fetchSuggestions = async (query) => {\n if (!query) {\n setSuggestions([]);\n return;\n }\n\n setIsLoading(true);\n\n try {\n \/\/ Make a GET request to the backend API\n const response = await axios.get(`http:\/\/localhost:5000\/api\/address?street=${query}`);\n console.log(response.data)\n setSuggestions(response.data || []);\n } catch (error) {\n console.error('Error fetching suggestions:', error);\n setSuggestions([]);\n } finally {\n setIsLoading(false);\n }\n };\n\n \/\/ Handle input change\n const handleInputChange = (event) => {\n const value = event.target.value;\n setInputValue(value);\n fetchSuggestions(value);\n };\n\n \/**\n * Handle the click event on a suggestion.\n *\n * @param {object} suggestion - The selected suggestion.\n *\/\n const handleSuggestionClick = (suggestion) => {\n setInputValue(suggestion.street);\n setCity(suggestion.locality); \/\/ locality represents the city\n setState(suggestion.region1); \/\/ region1 represents the state\n setPostCode(suggestion.postcode);\n setSuggestions([]);\n };\n\n return (\n <div style={{ padding: '20px' }}>\n <h1>Address Auto-Completion<\/h1>\n <div>\n <label>Street:<\/label>\n <input\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n placeholder=\"Enter street name\"\n style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}\n \/>\n {isLoading && <div>Loading...<\/div>}\n {suggestions.length > 0 && (\n <ul style={{ border: '1px solid #ccc', listStyleType: 'none', padding: 0, margin: 0 }}>\n {suggestions.map((suggestion, index) => (\n <li\n key={index}\n onClick={() => handleSuggestionClick(suggestion)}\n style={{ padding: '8px', cursor: 'pointer' }}\n >\n {suggestion.street}\n <\/li>\n ))}\n <\/ul>\n )}\n <\/div>\n <br>\n <\/br>\n <div>\n <label>City:<\/label>\n <input\n type=\"text\"\n value={city}\n readOnly\n style={{ width: '100%', padding: '8px', boxSizing: 'border-box', marginTop: '10px' }}\n \/>\n <\/div>\n <br>\n <\/br>\n <div>\n <label>State:<\/label>\n <input\n type=\"text\"\n value={state}\n readOnly\n style={{ width: '100%', padding: '8px', boxSizing: 'border-box', marginTop: '10px' }}\n \/>\n <\/div>\n <br>\n <\/br>\n <div>\n <label>PostCode:<\/label>\n <input\n type=\"text\"\n value={postCode}\n readOnly\n style={{ width: '100%', padding: '8px', boxSizing: 'border-box', marginTop: '10px' }}\n \/>\n <\/div>\n <\/div>\n );\n};\n\nexport default AddressAutocomplete;\n\n<\/pre>\n\n\n\nStreet<\/code> and read-only fields for City<\/code>, State<\/code>, and PostCode<\/code>.<\/p>\n\n\n\nCity<\/code>, State<\/code>, and PostCode<\/code> fields, ensuring accurate and efficient address entry.<\/p>\n\n\n\n\n
debounce<\/code> function from the lodash library<\/a> would improve the efficiency of this address autocomplete feature. Debouncing helps prevent making too many requests to the server by limiting how often the fetchSuggestions<\/code> function is called (and, in turn, the calls made to the backend) as the user types. It\u2019s not implemented to keep the tutorial straightforward.<\/p><\/li>\n<\/ul>\n\n\n\n<\/a>Test the App<\/h2>\n\n\n\n
npm run dev\n<\/pre>\n\n\n\n
VITE v5.3.1 ready in 350 ms\n\n \u279c Local: http:\/\/localhost:5173\/\n \u279c Network: use --host to expose\n \u279c press h + enter to show help\n<\/pre>\n\n\n\n
http:\/\/localhost:5173\/<\/code>, where you should see the home page:<\/p>\n\n\n\n![\"UI](\"https:\/\/i.imgur.com\/lHZmP3u.png\")
<\/figure>\n\n\n\nEast<\/code> in the Street<\/code> input field, it will trigger a backend API call and display the list of street addresses from the sample database that contains the text value East<\/code>:<\/p>\n\n\n\n![\"Street](\"https:\/\/i.imgur.com\/VRktZ1j.png\")
<\/figure>\n\n\n\nCity<\/code>, State<\/code>, and PostalCode<\/code> are autopopulated:<\/p>\n\n\n\n![\"Address](\"https:\/\/i.imgur.com\/Rewxmgq.png\")
<\/figure>\n\n\n\n<\/a>Why Street-Only Input Can Lead to Poor UX<\/h2>\n\n\n\n
<\/a>A Better Approach: State and City First<\/h2>\n\n\n\n
By doing so, not only does the system become more efficient, but it also reduces the risk of wrong address suggestions, enhances accuracy, and improves the overall user experience.<\/p>\n\n\n\n<\/a>Conclusion<\/h2>\n\n\n\n
FAQ<\/h2>\n\n\n\n