ms.form.search

Examples

Search Form (vuejs themes)

<ms-autocomplete> 
        <div>
            <input id="searchtext" type="text" autocomplete="off" @keydown="query" @keyup.enter="submit();ms.temp.search=''"  class="form-control form-control-sm border-0 ps-3 search-area-input" :placeholder="ms.filters.translate(ms.variables.search_box_placeholder)" v-model="ms.temp.search">
            <button class="btn bg-transparent border-0 py-0 px-3 rouneded-0 auto-submit lh-1" @click="submit();ms.temp.search=''" type="button">
                <i class="bi bi-search lh-1"></i>
            </button>
        </div>
        <div v-if="ms.temp.search && ms.temp.search.length && result.query" id="automatic">
            <div class="dropdown_inner w-100 bg-white overflow-auto" v-if="result.query">
                <div class="search_text p-2">
                    <h4 @click="gotoSearch(ms.temp.search)" role="button">
                        {{ms.filters.translate('Search Text')}} : {{ms.filters.translate(result.query)}}
                    </h4>
                </div>
                <div class="list-group-wrap mt-2 pt-2 border-top border-light" v-if="result && result.records && result.records.length != 0">
                    <div class="list-group">
                        <template v-for="item in result.records">
                            <a role="button" @click="ms.goTo('/product/'+item.alias);ms.temp.search=''" class="list-group-item bg-white w-100 p-2 border-0 rouneded-0 w-100" :class="{active: item._id == current._id}">
                                <div class="row g-0 justify-content-between">
                                    <div class="col-9">
                                        <div class="search-prd-info d-flex flex-nowrap flex-row">
                                            <span v-if="!item.images || !item.images.length" class="search-prd-poster bg-light no_img flex-auto overflow-hidden position-relative" style="padding-top:40px;padding-left:40px;max-height:40px">
                                                <ms-image class="img-fluid position-absolute top-0 start-0 w-100 h-100" src="//cdn.storehippo.com/s/6273386e9744993653600c71/ms.files/no_image.svg" :alt="item.name" :title="item.term"></ms-image>
                                            </span>
                                            <span v-if="item.images && item.images.length && item.images[0].image" class="search-prd-poster bg-light flex-auto overflow-hidden position-relative" style="padding-top:40px;padding-left:40px;max-height:40px">
                                                <ms-image class="img-fluid position-absolute top-0 start-0 w-100 h-100" style="object-fit:cover;" :src="ms.filters.image(item.images[0].image,'80x80')" :alt="item.name" :title="item.name"></ms-image>
                                            </span>
                                            <div class="search-prd-txt ps-3">
                                                <span v-if="item.brand" class="d-block search-prd-name mb-1 text-muted small fw-bold">
                                                    <small>{{ms.filters.translate(item.brand)}} </small>
                                                </span>
                                                <h4 class="d-block m-0 small search-prd-name link-dark">
                                                    {{ms.filters.translate(item.name)}}
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3 ms-pl-0 d-flex justify-content-end">
                                        <div class="search-prd-price">
                                            <span class="search-prd-price-new small">
                                                {{ms.filters.currency(item.price)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </template>
                    </div>
                </div>
            </div>
        </div>
</ms-autocomplete>

Search Form (angular themes)

<form class="search-form" ms-widget="ms.form.search" ms-uniqueid="00"  name="search" ms-name="search" data-ng-submit="submit()">
    <div class="input-group">
        <input id="search" type="text" autocomplete="off" class="form-control ms-br-zero ms-w-full" ng-model="data.text" placeholder="{{ms.variables.search_box_placeholder|msTranslate}}" ng-change="fields.search=data.text">
        <span class="input-group-btn">
            <button class="btn ms-br-zero btn-default auto-submit" data-ng-click="submit();abc()" type="button">
                <i class="icons8-search ms-fs-20"></i>
            </button>
        </span>
    </div>
    <div ng-if="data.text.length" id="automatic" class="list-group auto-search">
        <div href="#" class="list-group-item active ">
            <h4 ng-if="data.searchItem.length" class="text-left">
                {{'Showing result for'|msTranslate}} "{{data.text}}"
            </h4>
            <h4 ng-if="!data.searchItem.length" class="text-left">
                {{'No results for'|msTranslate}} "{{data.text}}"
            </h4>
        </div>
        <div class="list-group-item text-left searchproduct-name" ng-repeat="item in data.searchItem">
            <div class="row" ng-if="item.type == 'categories'">
                <div class="col-sm-12">
                    <a ng-click="abc();ms.location.path('/browse/{{item.alias}}')" class="searchproduct-name text-left">
                        <h4 ng-if="item.name" class="ms-mb-0 ms-mt-0 ms-fs-14 item-name">
                            <b class="font-bold">{{data.text}}</b> {{'in'|msTranslate}} {{item.name}}
                        </h4>
                    </a>
                </div>
            </div>
            <div class="row" ng-if="item.type != 'categories'">
                <div class="col-sm-2 col-md-2 col-xs-2 ms-pr-0">
                    <div style="max-width:50px;max-height:50px;" ng-if="item.images[0].image">
                        <a ng-click="abc();ms.location.path('/product/{{item.alias}}')">
                            <img ms-widget='ms.responsiveImage' ms-uniqueid="83"  ms-data-valign='middle' ms-data-halign='center'
                            ms-data-placeholder-html='<div class="img-place-holder"><table><tr><td>No Image</td></tr></table></div>'
                            ms-data-aspect-ratio='1:1'
                            ng-src="{{item.images[0].image|image:'120x120'}}" alt="No Image">
                        </a>
                    </div>
                </div>
                <div class="col-sm-7 col-md-7 col-xs-7">
                    <a ng-click="abc();ms.location.path('/product/{{item.alias}}')" class="searchproduct-name text-left">
                        <p ng-if="item.brand" class="ms-mb-0"><b> {{item.brand|msTranslate}} </b></p>
                        <h4 ng-if="item.name" class="ms-mb-0 ms-mt-0 ms-fs-14 item-name">
                            {{item.name}}
                        </h4>
                    </a>
                </div>
                <div class="col-sm-3 col-md-3 col-xs-3 ms-pl-0">
                    <ul class="list-styled list-inline pull-right" ng-if="item.price">
                        <li class="ms-mt-s search product-price price-new">
                            {{item.price|msCurrency}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>