Search inside a dropdown field

[Jane2]

i am using gravity forms and i have a list of 500 employees names which needs to be added in the dropdown field and as user will type few letters it should bring up the search. am not good with jquery and php. i saw few examples of devbridge GitHub - devbridge/jQuery-Autocomplete: Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields , but it is not working for me. any help would be appreciated.

[Jane2]

Hello Randell,
Thank you for your response. I was not able to get back to you regarding the Github. I came across a third-party plugin called Gravity form Autocomplete and I purchased it from the website Mode edit: link removed the plugin was installed successfully but the field width is going out of the screen. So I raised a ticket regarding it, and to my surprise, they asked for admin access to the client website to fix the issue and when i denied it, the support was also denied. So I did my own digging with the help of the developer tool of chrome browser and found the width is set in an external HTML file as an element. style and any code I try are not overriding it and all the javascript and HTML files are from cdnjs.com. Can you please help with a code to override it?
This is the css i tried

.gform-field-row--span-three {
grid-row: span 3;
}
body .gform_wrapper .gform_body .gform_fields #field_15_38.gfield select {width:350px;}

.autocomplete-suggestions{text-align:left;cursor:default;border:1px solid #ccc;border-top:0;background:green;box-shadow:-1px 1px 3px rgba(0,0,0,.1);
	span.select2.select2-container .select2-container--default .select2-container--above{width:350px;}
	.ginput_container.ginput_container_text{
		width:350px;
display:inline !important;}

This is the Javascript code I have tried

const style = document.createElement('style');
style.innerHTML = `
      div.ginput_container.ginput_container_text {
      width="350px";
margin:auto;
      }
    `;
document.head.appendChild(style);

This is the element i want to change

[Jane2]

Gravity form with the autocomplete field

[lasjorg]

I edited your post and deleted the duplicate post.

---

Selecting elements on WordPress is always a bit unreliable as the ids and element locations can change and the class names are often not very unique.

This should work as long as the id remains the same and the span stays in the same position.

select#input_15_38 + span {
  width: 100% !important;
}

Or if the data attribute doesn’t change you can select it using that.

[data-select2-id="1"] {
    width: 100% !important;
}

Any type of editing using the editor tools might change the selectors.

[Jane2]

thank you for editing my post and providing solution but it didnt work and if you check in this link Payroll for Single – South Asia Site , the correct length of the Staff name field appears for few second and then the length again goes to 750px i guess as in the element.style.

[lasjorg]

What selector did you use and how are you adding the styles?

You have an error in the CSS inside the wp-custom-css style element, which I assume is used for the custom CSS. The .autocomplete-suggestions selector is not close so all styles that come after that selector will not work.

No matter what the !important should overwrite the inline styles on the element as long as the element is selected correctly and the styles are applied.