[SOLVED] Autocompleted Error

I have a problem in autocompleted … when in my app I put the autocompletador in index.html it works correctly, but when I want to put it in a page called mypage this stops working since it makes a screen chan.

example.

is JS.

 var autocompleteDropdownAjax = myApp.autocomplete({
    input: '#autocomplete-dropdown-ajax',
    openIn: 'dropdown',
    preloader: true, //enable preloader
    valueProperty: 'id', //object's "value" property name
    textProperty: 'client', //object's "text" property name
    limit: 20, //limit to 20 results
    dropdownPlaceholderText: 'Try "JavaScript"',
    expandInput: true, // expand input
    source:  function (autocomplete, query, render) {
        var results = ['prueba, prueba2'];
        if (query.length === 0) {
            render(results);
            return;
        }
        // Show Preloader
        autocomplete.showPreloader();
        // Do Ajax request to Autocomplete data
        $$.ajax({
            url: 'autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
                query: query
            },
            
            success: function (data) {
                // Find matched items
                for (var i = 0; i < data.length; i++) {
                    if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
                }
                // Hide Preoloader
                autocomplete.hidePreloader();
                // Render items by passing array with result items
                render(results);
            }
        });
    }
});

work to in index.html but mypage no work

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="back link">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="center sliding"><img src="img/key.png" width="70px" /></div>
        <div class="right">
            <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
        </div>
    </div>
</div>

<div class="pages">
    <div data-page="pages" class="page">
        <div class="page-content" style="background-color: white;">
            <div class="content-block">
<div style="text-align: center; justify-content:center; margin-right:auto; margin-left:auto">
<h2 style="color:#00008B;">Datos Generales</h2>

  <!--- autocompleted ---->
<div class="list-block">
  <ul>
    <li class="item-content">
      <div class="item-input">
        <input type="text"  name="client" placeholder="Language" onclick="page(); id="autocomplete-dropdown-ajax" /></div>
    </li>
  </ul>
</div>
<!--- end autocompleted ---->
</div>
</div>
</div>
</div>
</div>

I got it working on a page of mine. Did something like this on the page.

		pageInit: function () {

			var self 		= this;
			var app 		= self.$app;
			var areaCodes 	= self.areaCodes;
			var $ 		= self.$;
1 Like

thank you very much for the answer … in this case it does “pageInit:”

Tengo el mismo problema