B4J Question HTML and JS for dynamic autocomplete datalist ???

Patent

Member
Licensed User
Dear Community,

i am messing with a small app, which should do a youtube-like (or other web-searches) search box.
See my try. I am endig up at 95%. :mad:
Maybe a JS Expert could give an advice.
What is missing: I got the JSON String from the YT Server and get them also on the B4J side (do a click on the WebView), but i am struggling with splitting the string and adding a "choicebox" with the results in the javascript.

Greets :)
P.S. submit the search with ENTER!


B4X:
Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private myWebView As WebView
    Private myWebengine As JavaObject
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
   
    myWebView.Initialize("myWebView")
    MainForm.RootPane.AddNode(myWebView,0,0,-1,-1)
       
    Dim temp As JavaObject=myWebView
    myWebengine = temp.RunMethod("getEngine",Null)
   
    Dim s As String=$"
    <!DOCTYPE html>
     <html>
    <body>
        <form action="http://www.youtube.com/results" method="get" target="_blank">
           
            <input Type="text" name="search_query"  maxlength="128" id="mysearchbox">
           
            <Select name="search_type">
            <option value="">Videos</option>
            <option value="search_users">Channels</option>
            </Select>
           
            <div id="outputbox"></div>
        </form>
   
        <script>
            function myFunction(data){document.getElementById('outputbox').innerText = data;}
            var myScript = '';
            document.getElementById('mysearchbox').onkeyup = function(){
                if(myScript!==''){document.body.removeChild(myScript);}
                var stuff_in_text_box = document.getElementById('mysearchbox').value;
                myScript = document.createElement('script');
                myScript.src='https://clients1.google.com/complete/search?client=youtube&hl=en&gl=at&gs_rn=64&gs_ri=youtube&ds=yt&cp=0&gs_id=1&callback=myFunction&q='+stuff_in_text_box;
                document.body.appendChild(myScript);
               
                // ??? splitting the result and add to a choicebox ???
               
            };
        </script>
   
    </body>
    </html>
    "$
   
    myWebView.LoadHtml(s)
    myWebView.Visible=True
End Sub

Sub myWebView_MouseClicked (EventData As MouseEvent)
    Try
        Dim doc As JavaObject=myWebengine.RunMethodjo("getDocument",Null)
        Log("Content SearchBox: "&doc.RunMethodjo("getElementById",Array("mysearchbox")).RunMethod("getValue",Null))
        Log("Results: "&doc.RunMethodjo("getElementById",Array("outputbox")).RunMethod("getInnerText",Null))
    Catch
        Log(LastException)
    End Try
End Sub
 
Last edited:

Erel

Administrator
Staff member
Licensed User
Why are you using WebView? Always better and simpler to create native layouts.
 

Patent

Member
Licensed User
Hmmm. Never scrutinized this. It was more an historic decision because the app works with an WebView.
But you are right i think. Why not changeing......

To set and get the webdata from my example, OkHttpUtils2 lib is the right one?
 
Top