Autocomplete StringGadget

[LuckyLuke]

Hi,

Is it possible to use https://jqueryui.com/autocomplete/ on a StringGadget ?
Or should I implement this functionality in SpiderBasic ?

Thanks.

[LuckyLuke]

This doesn't seems to work ...

Code: Select all

Procedure LoadScript(script.s, *func)
   !$.getScript(v_script, p_func);
 EndProcedure
 
Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  ; by eddy (http://forums.spiderbasic.com/viewtopic.php?p=320#p320)
  Protected gadgetObject=GadgetID(Gadget)
  !return (v_gadgetobject && v_gadgetobject.div)? v_usejquery? $(v_gadgetobject.div):v_gadgetobject.div:null;
EndProcedure
 
 Procedure test()
   Debug "ok" 

EndProcedure
 
 LoadScript("//code.jquery.com/jquery-1.12.4.js", @test())
 LoadScript("//code.jquery.com/ui/1.12.1/jquery-ui.js", @test())  

If OpenWindow(0, 0, 0, 322, 205, "StringGadget Flags", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   StringGadget(0, 8,  10, 306, 20, "")
   a = GadgetElement(0)

   
  !$(v_a ).autocomplete({
  !  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
  !});
EndIf

[Peter]

Hello LuckyLuke,

this is not that easy...

* jQuery already exists when SpiderBasic loads.

Remove this:

Code: Select all

LoadScript("//code.jquery.com/jquery-1.12.4.js", @test())

* jQuery UI also already exists, but in a custom version without autocomplete (Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js).

Remove this:

Code: Select all

LoadScript("//code.jquery.com/ui/1.12.1/jquery-ui.js", @test())

For testing purposes you can replace the content of "[SpiderBasicPath]\Libraries\javascript\jquery-ui.custom.min.js" with the content shown under http://code.jquery.com/ui/1.12.1/jquery-ui.min.js

Now your code should look like this:

Code: Select all

OpenWindow(0, 0, 0, 322, 205, "StringGadget Flags", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
StringGadget(0, 8,  10, 306, 20, "")
a = GadgetID(0)
! $(v_a.gadget.textbox).autocomplete ({
!   source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
! });

This works in principle but unfortunately not like expected because Dojo and jQuery UI are not the best friends (the jQuery UI autocomplete dropdown is hidden somewhere).

I think, the best idea is to use dijit.form.FilteringSelect (https://dojotoolkit.org/reference-guide ... elect.html).

I'm out & Good luck! ... Peter

[LuckyLuke]

Thanks Peter.

I'll propably create a popup window to allow the user to search.
But how can I check if the user pressed the ENTER key in the StringGadget ?

[Peter]

But how can I check if the user pressed the ENTER key in the StringGadget ?

with AddKeyboardShortcut:

Code: Select all

Enumeration
  #myWindow
  #myStringGadget1
  #myStringGadget2
  #myShortcutEvent
EndEnumeration

Procedure MenuEvents()
  If EventMenu() = #myShortcutEvent
    If GetActiveGadget()=#myStringGadget1
      Debug "<Enter>"
    EndIf
  EndIf
EndProcedure

OpenWindow(#myWindow, 0, 0, 300, 260, "#PB_Shortcut_Return", #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
StringGadget(#myStringGadget1, 10, 10, 200, 20, "[event]")
StringGadget(#myStringGadget2, 10, 40, 200, 20, "[no event]")
AddKeyboardShortcut(#myWindow, #PB_Shortcut_Return, #myShortcutEvent)
BindEvent(#PB_Event_Menu, @MenuEvents())
SetActiveGadget(#myStringGadget1)

Greetings ... Peter