Add custom HTML code to the search bar

General
1

Hello, I’d like to match this code to my “listing” page - When we do a search, we come across the same information as your search bar. Can you help me attach this code to my attributes (depart/destination/date/search) - Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flight Search</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <style>
        /* Add your CSS styles here */
        .search-container {
            max-width: 1160px;
            margin: 0 auto;
            padding: 0px;
            border-radius: 10px;
            background-color: #ffff;
            display: flex; /* Make it a flex container */
            justify-content: space-between; /* Distribute items evenly */
            align-items: center; /* Center items vertically */
        }
        .search-container label {
            flex: 0 0 0%; /* Set label width to 25% of the container */
            padding-right: 10px; /* Add space between label and input */
        }
        .search-container input[type="text"],
        .search-container input[type="date"],
        .search-container input[type="submit"] {
            flex: 1; /* Expand input fields to take remaining space */
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-family: Inter, sans-serif; /* Use Inter font */
            font-size: 1.125rem;
            height: 3.5rem;
        }
        .search-container input[type="submit"] {
            background-color: #30c7b5;
            color: white;
            padding: 12px 30px;
            margin: 8px ;
            border: none;
            border-radius: px;
            cursor: pointer;
            flex: 0 0 auto; /* Reset button width */
        }
        .search-container input[type="submit"]:hover {
            background-color: #30c7b5;
        }
    </style>
</head>
<body>

<div class="search-container">
    <label for="departure"></label>
    <input type="text" id="departure" name="departure" placeholder="Departure">

    <label for="destination"></label>
    <input type="text" id="destination" name="destination" placeholder="Destination">

    <label for="date"></label>
    <input type="date" id="date" name="date">

    <input type="submit" value="Search">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$(function() {
    // Array of example cities, you can replace this with your own data source
    var cities = [
        "New York",
        "Los Angeles",
        "London",
        "Paris",
        
        // Add more cities as needed
    ];

    $("#departure, #destination").autocomplete({
        source: cities
    });
});
</script>

</body>
</html>
4

Hi,

Can you please provide more details on what exactly this code is and what specifically you need to do using it?

5

This is a code to create a search bar on my “Home” page that can be connected to my Listing page (Discover all our listings | Molnee). I want that when you type (a destination, an arrival and a date) you can be redirected to this Listing page and have a filter according to the choices selected.

8

Hi,

Unfortunately, from your description, we cannot understand what exactly you need to do. Please provide more details about why you don’t use the default search bar, and you can also add custom attributes and theme options that are available (Geolocation and dates if you use Bookings).

Or, if this is a third-party code that needs to be integrated into the logic of our search form, then unfortunately we cannot help, as this is not within the scope of our support.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.