Search does't work when use right panel


#1

This is the seach page:

<div class="page">
    <!-- Search Bar with "searchbar-init" class for auto initialization -->
    <form class="searchbar searchbar-init" data-search-list=".list-block-search" data-search-in=".item-title" data-found=".searchbar-found" data-not-found=".searchbar-not-found">
        <div class="searchbar-input">
            <input type="search" placeholder="Search">
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a>
    </form>

    <div class="searchbar-overlay"></div>

    <div class="page-content">
        <div class="content-block searchbar-not-found">
            Nothing found
        </div>

        <div class="list-block list-block-search searchbar-found">
            <ul>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Acura </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Audi</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

This is the forwad method:

	function openPanel_Zzjg(){
		cmPlugin.commSearchPanel.openPanel('mobile/html/analysis/crkfx/crkfxSearchPanel.html');
	//	initCrkfxPicker();
	  //  cmApi.router.loadContent('mobile/html/basics/register/test.html');
	}
The cmPlugin is following:
      var CommSearchPanel = function(panelUrl){
            	var panel = this;
                panel.openPanel = function (panelUrl) {
                    var searchPanel = cmApi.router.loadHtml(panelUrl);
    				$$("#commPanelSearch").html(searchPanel);
    				$$('#txlPanelSearch').hide();
    				$$('#commPanelSearch').show();
    				myApp.openPanel('right');
            	};
            };
            api.commSearchPanel = new CommSearchPanel();

The result is following:


When I use another page ,the search page works properly


#2

I guess it happens because of this:

You just replace panel content with the HTML, it won’t initialize anything in this case. So you need to init Searchbar manually using its API app.searchbar.create http://framework7.io/docs/searchbar.html#searchbar-app-methods


#3

If it is F7 v1 then http://v1.framework7.io/docs/searchbar.html#initialize-search-bar-with-javascript