Programming Search Field in Dropdown List

Question

I have a list called Store List. On one of the columns that is a dropdown, i'm trying to make a search field at the top, so the user doesn't have to scroll through hundreds of stores. After much research this doesn't seem very feasible except using external files-something like chosen.jquery.js, which is what I'm attempting. The code is what I found off one of the archives ($(SPUtility.GetSPFieldByInternalName('Stores').Controls).find('select').chosen({width: "300px"}). Stores is the name of the field that i'm trying to create the dropdown on. When i load this in the Content Editor nothing happens. Could someone please help with a solution? I've set up the html file that I reference in the Content Web Editor as follows:

<script  src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
<script src ="https://workspace.web.att.com/sites/Cricket/Shared%20Documents/chosen.jquery.js" type="text/javascript"> </script> 
<script src = "https://workspace.web.att.com/sites/Cricket/Shared%20Documents/sputility.css" type ="text/javascript"> </script> 

<script type="text/javascript">

 $(document).ready(function(){ $(SPUtility.GetSPFieldByInternalName('Stores').Controls).find('select').chosen({width: "300px"})</script>;

Answer 1

The code you provided above works fine. I'm guessing you're missing something. My guess is

1. not everything is "done" when your code runs (so the control is not rendered, when the code runs...)
2. a file is missing - check the network tab of your browser, watch out for 404-errors
3. the internal name of the field is not "Stores".

The code doing all the work is:

$(SPUtility.GetSPFieldByInternalName('Stores').Controls).find('select').chosen({width: "300px"})

This code works fine for me. (However, you could skip the find() if you used .DropDown instead of .Controls.)

I loaded jquery.js, chosen.jquery.js and sputility.js (in that order) - don't forget to load chosen.css, too. After that I called $(SPUtility.GetSPFieldByInternalName('ChooseMe').Dropdown).chosen({width: '300px'}); (after making sure "ChooseMe" is really the internal name of the field..)

The result looks like: