If I have a very large Popup Menu list how can I make that searchable?

Question

Imagine that you have a PopupMenu's list that requires a lot of scrolling through the selections. Is there a way to create a control that will only display a subsection of the complete list?

Answer 1

I have finished a project where widgets like this have been useful so I thought I would share. By combining InputField and PopupMenu a searchable popup selection table can be created.

searchPopup[Dynamic[selection_], list_List] := 
 DynamicModule[{x = ""},
  Grid[{{
     InputField[Dynamic[x], String,
      Appearance -> "Frameless",
      ContinuousAction -> True,
      FieldHint -> "Search",
      FieldSize -> 10],
     Spacer[5],
     Dynamic[
      PopupMenu[Dynamic[selection,(selection = #; x = #) &], 
       Cases[list, 
        z_String /; StringMatchQ[z, x ~~ ___, IgnoreCase -> True]], 
       Null,
       Opener[True, Appearance -> Small]],
      TrackedSymbols :> {x}]
     }},
   Alignment -> {{Right, Left}, Center},
   Background -> White,
   Frame -> True,
   FrameStyle -> GrayLevel[0.8]]
  ]

list = {"Ajax", "admixes", "Acrux", "Alex", "affix", "admixtures", 
   "Alexei", "affixed", "admixing", "ambidextrously", "admixed", 
   "admix", "affixing", "ambidextrous", "Alexandrians", "Alexandria", 
   "Anaxagoras", "Alexandrian", "annexation", "Alexandra", 
   "admixture", "Alexis", "Alexanders", "annex", "affixes", 
   "ambidexterity", "Alexander"};
selection = "";

searchPopup[Dynamic[selection], list]

Edit

To address @kuba's comment by way of example in the GIF we have a toy interface. Normally you would not want your interface elements moving around all over the place. Therefore using popup menu is a good way to achieve this search menu objective.

Answer 2

Based on undocumented FrontEnd`AttachCell:

• What is FrontEnd`AttachedCell?

And Experimental`Autocompletebut this can be replaced with Mike's approach.

Need to work on style, automatic scrolling and some edge cases, but already works quite well. Feedback appreciated.

Column[{
  searchPopup2[Dynamic[selection], list],
  Graphics@Disk[]
  }]

Code

    searchPopup2[Dynamic[var_], list_] := 
 DynamicModule[{thisBox, currentList = {}, autocompleteF, 
   attachedCell, dynamicFunction, whatToDo, lastLength, cPos = 1, 
   itemWrapper, attachTo, dropMenu, menu}, 
   EventHandler[
     InputField[Dynamic[First@List@var, dynamicFunction], String, 
      FieldHint -> "Search", 
      ContinuousAction -> 
       True], {"MouseClicked" :> (If[ Length@currentList > 0, attachedCell = attachTo[thisBox, menu[currentList]]]), 
      "DownArrowKeyDown" :> (cPos = 
         Mod[cPos + 1, Length@currentList, 1]), 
      "UpArrowKeyDown" :> (cPos = 
         Mod[cPos - 1, Length@currentList, 1]), "ReturnKeyDown" :> (
        lastLength = Length@currentList;
        currentList = autocompleteF[var];
        If[Length[currentList] > 0, var = currentList[[cPos]]; 
         FinishDynamic[]]; dropMenu[])}, PassEventsDown -> True], 
  SynchronousInitialization -> False, 
  Initialization :> (thisBox = EvaluationBox[];
    autocompleteF = Autocomplete[list];
    currentList = autocompleteF@var;

    dynamicFunction = (var = #;
       lastLength = Length@currentList;
       currentList = autocompleteF[var];

       whatToDo[]) &;

    whatToDo[] := 
     Which[lastLength != 0 && Length[currentList] == 0, dropMenu[], 
      Or[lastLength == 0 && Length[currentList] > 0, 
       And[lastLength != 0 && Length[currentList] != 0, 
        Not@MatchQ[attachedCell, _CellObject]]], 
      attachedCell = attachTo[thisBox, menu[currentList]]];

    attachTo[parentbox_, what_] := 
     MathLink`CallFrontEnd[
      FrontEnd`AttachCell[parentbox, 
       ToBoxes[ExpressionCell[what, StripOnInput -> True, 
         Background -> White, CellFrameColor -> [email protected], 
         CellFrameMargins -> 0, CellFrame -> 2]], {Automatic, {Left, 
         Bottom}}, {Left, Top}, 
       "ClosingActions" -> {"ParentChanged", "EvaluatorQuit", 
         "OutsideMouseClick"}]];

    SetAttributes[menu, HoldFirst];
    menu[currentList_] := 
     EventHandler[
      Pane[Dynamic[
        Column[MapIndexed[itemWrapper, currentList], Spacings -> 0], 
        TrackedSymbols :> {currentList}], {200, {All, 300}}, 
       AppearanceElements -> None, Scrollbars -> {False, True}], 
      "MouseExited" :> (dropMenu[];)];
    itemWrapper[item_, {pos_}] := 
     MouseAppearance[#, "LinkHand"] &@
      EventHandler[
       Framed[item, ImageSize -> {Full, Automatic}, 
        FrameStyle -> None, 
        Background -> 
         Dynamic[If[pos == cPos, CurrentValue@"PanelBackground", 
           White]]], {"MouseClicked" :> (pos == cPos;
          var = item;
          dropMenu[];
          lastLength = Length@currentList;
          currentList = autocompleteF[var];),
        "MouseEntered" :> (cPos = pos)}, PassEventsDown -> True];
    dropMenu[] := (
      If[MatchQ[attachedCell, _CellObject],
       NotebookDelete[attachedCell];
       attachedCell =.
       ])
    )]