How can i do jQuery auto complete on textbox ?

[jul...@gmail.com]

Hello all

I hope you are nice!

I'm loooking for how can i do an autocomplete text box on APP INVENTOR as follow link 

http://www.devbridge.com/sourcery/components/jquery-autocomplete/

I Have a CSV file with 19.000 products with description and ID number of my company

 i'm doing a quickly search like dictionary to elp every employ find a ID number or description 

Please could you help me 

regards

[Stephen Zipprich]

There was an example done in AI Classic a long while back by Sua Thov that did something similar.  Here's the old thread.  You could try converting it to AI2.

[jul...@gmail.com]

Hello Mr. Zipprich.

hope you are nice!

Thanks for your information i'm studying this code :)))

But this code search in list i need search from csv file because there are 19000 product ID impossible to do a App inventor MAKE LIST  like this code.

Do you have any idea how can i do to look on CSV file or another extension file for exemple .txt

[Stephen Zipprich]

Try the list from csv table or list from csv row block depending on how the csv file is setup.

[jul...@gmail.com]

Hello Stephen.

Could you send to me any exemplo how can i use it ?

I have tried use but i haven't success

If is necessary i can change the file format.

Thanks for your kind attention

[Stephen Zipprich]

Here's an example of reading from a CSV file using the file component.

[jul...@gmail.com]

Hello Stephen.

I tried do but the APP return a error msg as "CSV text has multiple rows"

Should i put comma at all line data ?

My CSV has 19000 line and 1 column (A1 to A19000)

[Ghica]

You could use "list from csv table text" instead of "list from csv row text". However, you would get a list of 1900 lists as elements, where each list element has one element, the value of your column. Slightly more tricky to process, but not really.

Otherwise, you would have to transform your file first and replace the line ends, \n by comma's, so that your file has only one line with 1900 columns.

Cheers, Ghica.

[jul...@gmail.com]

Hello Ghica

Do you know i can do autocomplete as following link ?

http://www.devbridge.com/sourcery/components/jquery-autocomplete/

I never ever seen anybody using it on APP Inventor

I need it so much but i don't know how do it :(

Regards

[Abraham Getzler]

If you want to do it in blocks,
here is an old discussion.
https://groups.google.com/forum/#!msg/appinventor/kWfIzg-EJGQ/ogziMU4c2PAJ

You would have to load and pre-process your word list.

ABG

[jul...@gmail.com]

Hello Abraham

Hope you are nice!

Thanks for your kind attention

I saw this link i think it's a problem to APP INVENTOR. 

I haven't found anything about autocomplete and I'm not getting success.

Do you have any exemple about it ?

Thanks 

[Ghica]

Nice idea, but... How can you figure out that the user has typed two letters? There is no event for text changes in a textbox in AppInventor linke onchange for HTML, only gotfocus and lostfocus.

Cheers, Ghica.

[Abraham Getzler]

I probably forgot to mention that you need to run a fast clock
checking the length of the text field contents, and updating the
pick list when it changes.

Checking the text field in a clock routine is not my original idea.

I may have seen it in a ScottfromScott post.

ABG

[jul...@gmail.com]

Hello all

Thanks for help me but I have no idea how can do it :/

I will try do something because i never ever seen anything on google like autocomplete to app inevntor

Have a nice weekend!

[Abraham Getzler]

Here's a sample, based on the words used at this web site:
http://www.archives.gov/exhibits/charters/declaration_transcript.html

I got the .aia working and took screen shots of the blocks, designer,
and runtime.

I won't have a chance to build a doc until next week.

This can be speeded up with some more coding.

Have a fun weekend!

ABG

[Abraham Getzler]

P.S.  For your application, you would need to build
 extra tables mapping the product ID into a descriptive paragraph,
and mapping word fragments into product ID(s).

ABG

[jul...@gmail.com]

helloooo Abraham

Hope you are nice!

Thanks so much for your help now I have a hard work to finish my project :)

i'm look for the code that is very similar with it

i need to do the code looking for anywhere on text line 

for exemplo my ID 

0123456 - RED STRAWBERRY

if i put only 456 my code need looking for only text line with 456 on anywhere

as following example country name search

http://www.devbridge.com/sourcery/components/jquery-autocomplete/

[Ghica]

Hi,

Having a pure AppInventor solution to your problem may be nice in the short term, but what if you would like to make this into a real app? Are you going to send out a new version each time the list of products changes? Eventually you would like to download the list of products dynamically from a server. My example below does not do that right now, because I wanted it to work also standalone (and I do not have a server handy), but with some Javascript and Ajax knowledge en the documentation of the autocomplete package, this should be easy to do.

If you want to use jQuery and JavaScript and your autocomplete package http://www.devbridge.com/sourcery/components/jquery-autocomplete/ I have an example for you. I based it on the example from Taifun, here: http://puravidaapps.com/snippets.php#2webviewstring and on the countries demo in the autocomplete package.

I tried to make it into a slightly more realistic example, by adding name and address fields. Here a 2 screenshots from my phone:

I will attach the .aia file, from which you can find the Javascript and HTML files. Here are also two pictures, one from the designer and one from the blocks editor, and a picture of the media list.

For your purpose, you would need to replace the countries.js file with the file containing your data and adapt the HTML and Javascript accordingly.

Cheers, Ghica.

[Ghica]

Just one additional thing: the path for the .apk file is for me the same as the development file, so file:///mnt/sdcard/AppInventor/assets/demo.html

Cheers, Ghica.

[Taifun]

Just one additional thing: the path for the .apk file is for me the same as the development file, so file:///mnt/sdcard/AppInventor/assets/demo.html

this works only on your development device

see here what needs to be done https://puravidaapps.com/tutorials.php#html

Yes, you also can upload html files as assets into App Inventor! There is only one special thing to consider: During development, you have to use the development path to the embedded html document:

file:///mnt/sdcard/AppInventor/assets/<NAME OF YOUR HTML FILE>.html

Before packaging the app, use the production path.

file:///android_asset/<NAME OF YOUR HTML FILE>.html

Taifun

[jul...@gmail.com]

Hello Ghica and Taifun

Hope you are nice!

Yess is exactly it.

I made with my 19000 product id but now i have a BIG problem.

The Jquery is veryyyyy slowwwwww to load the ID when i write on textbox :(

do you have any idea how can do faster 

i believe it's a solution :)

Have a good week

[Ghica]

Julio,

I have no clue without more data. Maybe you can run the HTML and js outside of App Inventor, and see if it is slow there too. 

Besides, there is still a problem with building the .apk file, which I am trying to solve. See: https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/mitappinventortest/S1l0X3AJb1w/hx2HA1EviNUJ

Cheers, Ghica.

[Taifun]

https://stackoverflow.com/questions/817576/how-to-improve-performance-of-jquery-autocomplete

and other threads, just do a Google search...

Taifun

[jul...@gmail.com]

Hello all

I resolved the problem i have found another jquery code and now my code is run very fast :) with 15000 id product

but i have found another problem

How can i integrate a web form on webviwer with my aplication form because now my aplication is divided between web form and app inventor form

when i click on send button only app inventor data were saved

thanks so much your kind attention

i believe there's end for it :)))

[Taifun]

see this snippet how to pass something from the webviewer to App Inventor

How does the new property Webviewer.WebViewString work?

Taifun

[Ghica]

I have replaced the .aia file for the autocomplete example, to include the forgotten jquery-1.8.2.min.js

Thanks again to Taifun for spotting it. 

Cheers, Ghica.

[Ghica]

Julio,

You can look at demo.js in my original example how I used webviewstring to pass the finally selected value for the country field to App Inventor. And of course you could modify demo.html to include more fields and a submit button.

Whether you would want to place the whole form into an HTML file depends on various considerations.

• What are you going to do with the other values in the form? If you are just going to send the values to a server, then yes, put the whole form in HTML. But then, why would you use App Inventor at all?
• If you need all form values for other processing in App Inventor, then it is easier to have just this one autocomplete input field in HTML/jQuery/JavaScript and pass the selected value using webviewstring.
• The problem and disadvantage of having some fields not in App Inventor is that it is not so easy to have the autocomplete field look like an App Inventor field. With some better CSS you could do it, but I did not want to take the time to figure it out,
• Looking at the previous point, styling your form may be a reason to have the whole form in HTML. You could use jQuery to encode the values of your form into a parameter string, as if sending it to a server. You could then pass this string with webviewstring to App Inventor, where you would have to decode it. Does not sound so easy to me.

Good luck with your studies, cheers, Ghica.

[jul...@gmail.com]

Hello all

Good night 

I have good news :)

I won the first part but now i need a litle help again

how can i get data from my html file to app inventor text box because i will save the select data on jquery at my tinydb

i haven't found on google the exemple like it

i was seen the Taifun example but i have changed a little and isn't work :/

thanks so much on the final i will upload for you

App inventor it's a good battle

[Taifun]

It would really help if you provided a screenshot of your relevant blocks and your updated HTML file, so we can see what you are trying to do, and where the problem may be.

Taifun

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by Taifun.         

[jul...@gmail.com]

i wish when i click on text box button 2 i want to get the HTML select data and put on HINT for textbox2 

[jul...@gmail.com]

Hello all

I have made it and now my text box on app inventor show the message NaN

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    

<title>Busca-Rápida de Produtos SCHUNK</title>

<link href="styles.css" rel="stylesheet" />

<script type="text/javascript">

     var str= document.getElementById('txtjob').value;

 </script>

</head>

  

<script type="text/javascript" src="jquery-1.8.2.min.js">

</script>

    <script type="text/javascript" src="jquery.mockjax.js">

</script>

    <script type="text/javascript" src="jquery.autocomplete.js">

</script>

    <script type="text/javascript" src="countries.js">

</script>

    <script type="text/javascript" src="demo.js">

</script>

<body>

<div style="position: relative; height: 80px;">

            

<input char type="text" name="txtjob" id="txtjob" class="autocomplete" style="position: absolute; z-index: 2;width: 300px;"/>

        

</div>

 

  <script>

    

    document.write("The value from the app is<br/>" + window.AppInventor.getWebViewString());

    window.AppInventor.setWebViewString( +str)

  </script>

</body>

</html>

[Abraham Getzler]

This is not my specialty, but I suspect
NaN means "Not a Number".

ABG

[Taifun]

Ghica recommended to modify demo.js to transfer the value back to App Inventor...

Taifun

[jul...@gmail.com]

Hello all

Hope you are good!!

i've tried it 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    

<title>Busca-Rápida de Produtos SCHUNK</title>

    

<link href="styles.css" rel="stylesheet" />

</head>

  

<script type="text/javascript" src="jquery-1.8.2.min.js">

</script>

    <script type="text/javascript" src="jquery.mockjax.js">

</script>

    <script type="text/javascript" src="jquery.autocomplete.js">

</script>

    <script type="text/javascript" src="countries.js">

</script>

    <script type="text/javascript" src="demo.js">

</script>

<body>

<div style="position: relative; height: 80px;">

            

<input type="text" name="txtjob" id="txtjob" class="autocomplete" style="position: absolute; z-index: 2;width: 300px;"/>

        

</div>

<div>

<p>

<script>

$( "input" )

  .keyup(function() {

    var str = $( this ).val();

    $( "p" ).text( str );

  })

  .keyup();

 document.write("The value from the app is<br/>" + window.AppInventor.getWebViewString(str));

    window.AppInventor.setWebViewString(str);

</script>

</p>

</body>

</html>

Isn't work, but now the textbox on app inventor keep white 

[Ghica]

Julio,
No, I am not good! Did you study my example at all? And understood how it works? You should set the webviewstring at selection of the autocomplete, and not on every keyup. Look at my demo.js how it is done. We can suggest just so much, and make just so many examples, but in the end it is your app.

[jul...@gmail.com]

Sorry Ghica,

Sorry I was a little confuse because i was using another *.js 

but now is working 

thanks your kind attention

[Ghica]

Hi Julio,

I am very glad to hear that.

Cheers, Ghica.