Extracting CSS from admin theme to support autocomplete inputfield on frontend

[SteveB]

I need to pick out the necessary CSS from wire/modules/AdminTheme/AdminThemeDefault/styles/main-classic.css to support InputfieldPageAutocomplete fields on a frontend form. I don't want the whole form to look like an admin form, I just want the look and feel of the field, such as the little prompts and indicators inside the field, to work like they do on the admin pages.

Whenever I do this kind of thing I end up tediously searching main-classic.css (which is all on one line) and trying things out until I have added just the CSS that's actually needed. I wish there were a breakdown of what's used by what or a more comprehensible commented version of main-classic.css.  How do you go about this?

My frontend form is built using the API. A couple of fields are ones where I want the user to select Pages. These are made as ordinary text fields but I've added javascript to support the jQueryUI Autocomplete functionality with the ajax calling ServicePages. The JS is working nicely and I like that I can use it to add autocomplete support to any text field. The fields collect titles as a delimited list.

Thanks.

[LostKobrakai]

I'd just use the browser devtools. Inspect the autocomplete field and copy over the rules. Also there are certainly tools out there that can convert minified css back to readable state, you should never have to read code in a single line.

[SteveB]

Yeah, all good points. Looks like my script needs some functionality from InputfieldPageAutocomplete.js. Might be better to figure out how to make InputfieldPageAutocomplete.js work in this situation but will save that for another day.

[tpr]

If its only partly identical then I would probably start from scratch. This way you would know what's going on and I also think it's quicker than the trial and error mode

[SteveB]

My frontend autocomplete support for text fields is working nicely now. It uses autocomplete to build a csv list in a text field. You can use the autocomplete suggestions or just edit the text field as you like. The UI is sort of a "lite" interpretation of InputfieldPageAutocomplete.

The javascript is based on jqueryUI example code, with the ajax call going to a ServicePages URL. For styling, I extracted parts of the CSS of InputfieldPageAutocomplete, mostly that having to do with the popup list and the status icon. Renamed those classes InputfieldTextAutocomplete. There's nothing special to do when making the form markup, just add JS and CSS files to the page. A jQuery selector string in the JS determines which fields get the autocomplete treatment and I'm using the text field id as the template name in the selector that gathers page titles for the list.

Some of the people who use this form will also be using the backend so I felt it was important to mimic the ">>" status icon from InputfieldPageAutocomplete. It does a great job of showing autocomplete is there and giving feedback on the ajax search operation. Instead of the note part of InputfieldPageAutocomplete I use a title attribute (on the status icon) to say "Type a few letters and autocomplete will offer matching items" and clear that out after they've done it once. That's enough of a clue and not too naggy.

Thanks everybody.