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

Patent

Member
Licensed User
Longtime 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:

Patent

Member
Licensed User
Longtime 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?
 
Upvote 0
Top