Announcement

#1 2023-01-23 18:15:31

BigIsland270972
Member
Norway
2022-03-15
374

How to include RVAutocomplete into BlockSearch and display total items

Hello/Hi/Greetings,

My GOAL is to incorporate the RV Autocomplete (https://piwigo.org/ext/extension_view.php?eid=694)  into plugin Block search (https://piwigo.org/ext/extension_view.php?eid=896). And show total numbers of files in the gallery in the searchbox

Heres what I have manage to do so far:
plugins/block_search/blocksearch/stuffs_search.tpl

Code:

{html_style}
.bsearck{
  padding:20px;
  font-align:center;
  width:100%;
margin-left: auto;
margin-right: auto;
margin: 20px:
padding-left: inherit;
padding-right: 20px;
}
#bqsearchInput {
  color: black;
  border: 1px solid #3c3c3c;
  padding: 5px;
  background-color: transparent;
  font-weight: bolder;
  font-size: 20px;
  width: 300px;
  text-align: center;
  margin-bottom: 10px;
}
{/html_style}
<div class="bsearck">
        <form class="navbar-form" role="search" action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
            <div class="form-group">
                <input type="text" name="q" id="qsearchInput" class="form-control ui-autocomplete-input" placeholder="{'bSearch'|@translate|escape:'html'}..." />'
            </div>
        </form>
</div>

https://www.fotoarkiv.no/priv/search.png

Last edited by BigIsland270972 (2023-01-23 18:21:41)


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#2 2023-01-24 09:09:43

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Do i need to inclue the javascript code from plugin?

<script type="text/javascript" async="" src="plugins/rv_autocomplete/res/suggest-core.js"></script>

Does  Anyone have the knowledge?


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#3 2023-01-24 09:14:55

ddtddt
Piwigo Team
Quetigny - France
2007-07-27
7201

Re: How to include RVAutocomplete into BlockSearch and display total items

Hi :-)

js in'st already include ?


You love Piwigo so don't hesitate to participate, learn more on the "Contribute to Piwigo" page. If you don't have much time for contribution, you can also help the project with a donation.

Offline

 

#4 2023-01-24 10:02:40

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Hi. I don't know... Im in deepwater as i dont have expertise in this field, so It's kinda hit and miss. sorry but do you understand what I'm trying to accomplish? Have the rv autocomlete suggestion to the Blocksearch [PWGStuff] plugin.


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#5 2023-01-24 10:57:56

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Here's is what I have now:

Code:

{/html_style}
<div class="bsearck">
        <form class="navbar-form" role="search" action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
            <div class="form-group">
<script type="text/javascript">var qsearch_prompt="{'Quick search'|@translate|@escape:'javascript'}";{if empty($QUERY_SEARCH)}document.getElementById('qsearchInput').value=qsearch_prompt;{/if}</script>
                <input type="text" name="q" id="qsearchInput" class="form-control ui-autocomplete-input" placeholder="{'bSearch'|@translate|escape:'html'}..." />'
            </div>
</div>

Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#6 2023-01-24 11:24:24

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Code:

<div class="bsearck">
  <form action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
    <p style="margin:0;padding:0"{*this <p> is for html validation only - does not affect positioning*}>
      <input type="text" name="q" id="qsearchInput" onfocus="if (value==qsearch_prompt) value='';" onblur="if (value=='') value=qsearch_prompt;" style="width:90%"{if !empty($QUERY_SEARCH)} value="{$QUERY_SEARCH}"{/if}>
    </p>
  </form>
  <script type="text/javascript">var qsearch_prompt="{'Quick search'|@translate|@escape:'javascript'}";{if empty($QUERY_SEARCH)}document.getElementById('qsearchInput').value=qsearch_prompt;{/if}</script>

Last edited by BigIsland270972 (2023-01-24 11:27:21)


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#7 2023-01-24 11:25:53

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Not working...Allthough I might be close: -)


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#8 2023-01-28 02:43:40

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

SO FAR UPDATE:

Code:

{if $theme_config->quicksearch_navbar}
<script type="text/javascript" async="" src="plugins/rv_autocomplete/res/suggest-core.js"></script>
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none;"></ul>
                  <form class="form-inline navbar-form ml-auto" role="search" action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
                    <i class="fas fa-search" title="{'bSearch'|@translate}" aria-hidden="false"></i>
                    <div class="form-group">
                        <input type="text" name="q" id="qsearchInput" class="form-control" placeholder="{'bSearch'|@translate}" />
                    </div>
                  </form>
{footer_script require='jquery'}
var qsearch_icon = $('#navbar-menubar>#quicksearch>.fa-search');
var qsearch_text = $('#navbar-menubar>#quicksearch #qsearchInput');
$(qsearch_icon).click(function () {
  $(qsearch_text).focus();
});
$(document).ready(function() {
  $('#navbar-menubar>#quicksearch').css({literal}{'color': $('#navbar-menubar .nav-link').css('color')}{/literal});
});
{/footer_script}
{/if}

Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#9 2023-01-31 14:03:15

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Does anybody have the knowledge?

Here's what I have now:
plugins/block_search/blocksearch/stuffs_search.tpl

Code:

{html_style}
.form-control {
  text-align: center;
}
.pwgstuffs-container {
  padding-top: 20px;
  padding-bottom: 20px;
}
.fas {
  font-weight: 1000;
  font-size: x-large;
  padding-right: 10px;
}
.col-12 {
  padding-top: 30px;
}
.form-inline {
  display: block ruby;
}
.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  float: unset;
  font-size: x-large;
}
{/html_style}
{if $theme_config->quicksearch_navbar}
                  <form class="form-inline navbar-form ml-auto" role="search" action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
                    <i class="fas fa-search" title="{'bSearch'|@translate}" aria-hidden="false"></i>
                    <div class="form-group">
                <span role="status" aria-live="polite" class="ui-helper-hidden-accessible">
                <input type="text" name="q" id="qsearchInput" class="form-control ui-autocomplete-input" placeholder="{'bSearch'|@translate}" autocomplete="off" />
                    </div>
                  </form>
{footer_script require='jquery'}
var qsearch_icon = $('#navbar-menubar>#quicksearch>.fa-search');
var qsearch_text = $('#navbar-menubar>#quicksearch #qsearchInput');
$(qsearch_icon).click(function () {
  $(qsearch_text).focus();
});
$(document).ready(function() {
  $('#navbar-menubar>#quicksearch').css({literal}{'color': $('#navbar-menubar .nav-link').css('color')}{/literal});
});
{/footer_script}
{/if}

Last edited by BigIsland270972 (2023-02-03 14:26:46)


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

#10 2023-02-11 15:46:47

BigIsland270972
Member
Norway
2022-03-15
374

Re: How to include RVAutocomplete into BlockSearch and display total items

Ir really need some input from ddtddt on  this one.
plugins/block_search/blocksearch/stuffs_search.tpl
UPDATE:

Code:

{html_style}
.form-control {
  text-align: center;
}
.pwgstuffs-container {
  padding-top: 0px;
  padding-bottom: 0px;
}
.fas {
  font-weight: 1000;
  font-size: x-large;
  padding-right: 10px;
}
.form-inline {
  display: block ruby;
}
.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  float: unset;
  font-size: x-large;
}
{/html_style}
{if isset($blocks.mbMenu->data.qsearch) and !$theme_config->quicksearch_navbar}
      <div class="dropdown-header">
        <form class="navbar-form" role="search" action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
            <div class="form-group">
                <input type="text" name="q" id="qsearchInput" class="form-control" placeholder="{'Quick search'|@translate}" />
            </div>
        </form>
      </div>
      <div class="dropdown-divider"></div>
{/if}
{if isset($MENUBAR)}
        <nav class="navbar navbar-expand-lg navbar-main {$theme_config->navbar_main_bg} {if $theme_config->page_header == 'fancy'}navbar-dark navbar-transparent fixed-top{else}{$theme_config->navbar_main_style}{/if}">
            <div class="container{if $theme_config->fluid_width}-fluid{/if}">
{if $theme_config->logo_image_enabled && $theme_config->logo_image_path !== ''}
                <a class="navbar-brand mr-auto" href="{$U_HOME}"><img class="img-fluid" src="{$ROOT_URL}{$theme_config->logo_image_path}" alt="{$GALLERY_TITLE}"/></a>
{else}
                <a class="navbar-brand mr-auto" href="{$U_HOME}">{$GALLERY_TITLE}</a>
{/if}
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-menubar" aria-controls="navbar-menubar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="fas fa-bars"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbar-menubar">
{/if}
{if $theme_config->quicksearch_navbar}
                  <form class="form-inline navbar-form ml-auto" role="search" action="{$ROOT_URL}qsearch.php" method="get" id="quicksearch" onsubmit="return this.q.value!='' && this.q.value!=qsearch_prompt;">
                    <i class="fas fa-search" title="{'Quick search'|@translate}" aria-hidden="true"></i>
                    <div class="form-group">
                        <input type="text" name="q" id="qsearchInput" class="form-control" placeholder="{'Quick search'|@translate}" />
                    </div>
                  </form>
{footer_script require='jquery'}
var qsearch_icon = $('#navbar-menubar>#quicksearch>.fa-search');
var qsearch_text = $('#navbar-menubar>#quicksearch #qsearchInput');
$(qsearch_icon).click(function () {
  $(qsearch_text).focus();
});
$(document).ready(function() {
  $('#navbar-menubar>#quicksearch').css({literal}{'color': $('#navbar-menubar .nav-link').css('color')}{/literal});
});
{/footer_script}
{/if}

Last edited by BigIsland270972 (2023-02-11 15:47:29)


Piwigo 14.0 | https://fotoarkiv.no | https://foto.arki.vet | http://Bergen.gallery  | http://Ålesund.gallery | http://geiranger.gallery | http://fjord.photos | http://foto.oslo.no
Apache | PHP 8.1 | MariaDB

Offline

 

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2024 · Contact