In Semantic UI, you can use the dropdown component to create a dropdown menu that allows auto-selection based on the IP address format. Additionally, you can prevent auto-selection of items that have been manually added to the dropdown. To achieve this, you'll need to customize the behavior of the dropdown using JavaScript.

Here's how you can implement auto-selection by IP format and prevent auto-selection of added items in Semantic UI:

  1. HTML Structure: Start by creating the HTML structure for the dropdown:

    <div class="ui fluid selection dropdown" id="ipDropdown"> <input type="hidden" name="ipAddress"> <i class="dropdown icon"></i> <div class="default text">Select an IP Address</div> <div class="menu"> <div class="item" data-value=""></div> <div class="item" data-value=""></div> <!-- Add other predefined IP addresses here --> </div> </div>
  2. Initialize the Dropdown: In your JavaScript code, initialize the dropdown with custom behavior:

    $(document).ready(function () { $('#ipDropdown').dropdown({ // Allow the user to enter their own IP address allowAdditions: true, // When an item is added manually, prevent it from being auto-selected onAdd: function (addedValue) { $('.menu .item').each(function () { if ($(this).data('value') === addedValue) { $(this).removeClass('selected'); } }); }, // Check if the entered IP address is valid and select it if it matches the format onLabelCreate: function (value) { if (/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/.test(value)) { return $('<div class="ui label">' + value + '</div>'); } }, }); });
  3. Customize Styling (Optional): You can also apply custom CSS styling to the dropdown if needed.

With this setup, the dropdown will allow users to select predefined IP addresses from the list. If the user enters a valid IP address (matching the format), it will be automatically selected. If the user enters a custom IP address, it will be added to the dropdown as an option, but it won't be auto-selected.

Note: In the JavaScript code above, I'm using jQuery to select elements and apply custom behavior. Make sure you have included the jQuery library in your project.

Keep in mind that this is just a basic example to get you started. You can further customize the dropdown's behavior and styling as needed for your specific use case.

Have questions or queries?
Get in Touch