[RESOLVED] Problem layout and navbar gap with expandable search with autocomplete ajax

Questions
1

Hi,

Im have a problem when click on expandable navbar search, some times break layout
Can reproduce on chrome and on android 9

16

Im using on expand search with autocomplete…

2

Возьмите за основу работоспособный kitchen, затем постепенно добавляйте ваш код. Таким образом вы сможете найти проблему.

3

im using this for navbar

I have to change input type from search to text and for autocomplete show have to remove class navbar-inner-large-collapsed

i think this layout crash is becouse or when happen is when i click on search and keyboard open …after close search <-- with text on input
i like to use this but doing this i have to work other way… can any one help me out ?

<div class="navbar">
                    <div id="hackbar" class="navbar-inner navbar-inner-large">
                        <div class="left">
                            <a href="#" class="link icon-only panel-open" data-panel="left">
                                <i class="icon f7-icons if-not-md">menu</i>
                                <i class="icon material-icons md-only">menu</i>
                            </a>
                        </div>
                        <div class="title sliding" >Framework 7</div>
                        <div class="right">
                            <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
                                <i class="icon f7-icons if-not-md">search</i>
                                <i class="icon material-icons md-only">search</i>
                            </a>
                        </div>
                        <div class="title-large">
                            <div class="title-large-text">Framework 7</div>
                        </div>
                        <form  
                            class="searchbar searchbar-expandable searchbar-components searchbar-init" >
                            <div class="searchbar-inner">
                                <div class="searchbar-input-wrap">
                                    <input type="text" placeholder="search" id="autocomplete-dropdown-ajax"/>
                                    <i class="searchbar-icon"></i>
                                    <span class="input-clear-button"></span>
                                </div>
                                <span class="searchbar-disable-button if-not-aurora">Cancel</span>
                            </div>
                        </form>
                    </div>
                </div>

then on js side

var autocompleteDropdownAjax = app.autocomplete.create({
inputEl: ‘#autocomplete-dropdown-ajax’,
openIn: ‘dropdown’,
//expandInput: true, // expand input
//preloader: true, //enable preloader
/* If we set valueProperty to “id” then input value on select will be set according to this property */
valueProperty: ‘codigo’, //object’s “value” property name
textProperty: ‘codigo’, //object’s “text” property name
limit: 50, //limit to 20 results
on: {
open: function () {
console.log(‘autocomplete open’);
var element = document.getElementById(“hackbar”);
element.classList.remove(“navbar-inner-large-collapsed”);
}

},
close: function () {


  console.log("go is close")

}

},
dropdownPlaceholderText: ‘Search …’,
source: function (query, render) {
var autocomplete = this;
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Show Preloader
autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
app.request({
  url: 'http://***/search.php',
  method: 'GET',
  dataType: 'json',
  //send "query" to server. Useful in case you generate response dynamically
  data: {
    query: query,
  },
  success: function (data) {
    // Find matched items
    console.log("chamada")
    for (var i = 0; i < data.length; i++) {
      if (data[i].codigo.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
    }
    // Hide Preoloader
    autocomplete.preloaderHide();
    // Render items by passing array with result items
    render(results);
  }
});

}
});

4

Found the problem that break navbar …after close the expandable search the input stay with the class “input-focused” so when click on icon search open the keyboard and navbar show a mess but if i remove the class
$$( “#autocomplete-dropdown-ajax” ).removeClass( “input-focused” );
work fine