1

enter image description hereI 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>;
  • The script-link points to sputility.css not sputility.js. Also note that sputility is not longer maintained. – Nils May 21 at 5:15
  • I corrected that part, but still nothing happening to the dropdown. Any ideas of how to make this or another way to implement? – Ginger22 May 21 at 16:18
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:

enter image description here

  • Glad you made it work! Will this work if i have an app i made with the Custom List App with columns store number, address, city, and stores? The stores field (which i verified) is a calculated column that combines store number, address. The field that i actually want the lookup on is in a calendar called Store Number LookUp, which is based off the stores field in the list. Will this work? Should i add the CEWP to the Calendar or to the Store LookUp List. What app did you use to make the above? – Ginger22 May 21 at 22:37
  • I used no app. Simply edited the NewForm. Can you show what you have so far? I feel you lost me there.. – Nils May 22 at 5:12
  • OK I added this in the form web part. I added the link to the html document in the Web Part Properties link. I also tried adding the code in the Edit Source part of the Content Editor. Nothing working yet. When i clicked on one of the files i get the screen shot that i pasted in the original post. I used Notepad for all the files. Does that matter? My chosen.html file changed to chosen.html.txt. Other than that not sure why it's not working...Appreciate the assistance. – Ginger22 May 22 at 20:47
  • The error says that jQuery is not loaded. You need to make sure jQuery is loaded before loading chosen. Thats because chosen is a jquery-plugin... – Nils May 23 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.