Implement Auto-complete again. about jplist-es6 HOT 18 CLOSED

Please check this: https://plnkr.co/edit/JnQrtBEHKo0hxPo3RbC0?p=preview

from jplist-es6.

Regarding the search you have a deep linking option. If this options is enabled you may generate URL that filters a page on page load.

from jplist-es6.

Ok thanks! If you have some time could you please give some example how to do that for a newbie :)

from jplist-es6.

data-id should be added to control this value is used in deep link URL. And deepLinking: true should be added in jplist.init:

<!-- textbox filter control -->
<input
     data-jplist-control="textbox-filter"
     data-group="group1"
     data-name="title-text-filter"
     data-path=".title"
     type="text"
     value=""
     placeholder="Filter by Title"
     data-id="title"
/>

jplist.init({
        deepLinking: true
});

from jplist-es6.

OK thanks, but how do i put this code on another page than the filter list and when i type in a word then it redirect to the filter list page and filter/search at that page? Like a site wide search function..

from jplist-es6.

You may take deep link URL structure, for example in case on textbox control it could be: http://www.example.com/page#group=group1&title=a and on button click just change title=a to title=YOUR_KEYWORD

from jplist-es6.

This is my code i have on test.php (the filter list is on filterpage.php). I change title to * that will search/filter any keyword as in the docs. But how do i add a button etc. Sorry for being a newbie.

<input data-jplist-control="textbox-filter" data-group="group1" data-name="title-filter" data-path="*" type="text" value="" placeholder="Filter by Title" data-id="http://www.example.com/filterpage.php/page#group=group1&title=*">

from jplist-es6.

Hello, where in the docs have you find that * will search any keyword? It looks like a docs mistake. Anyway, please use plunker to generate an example of your HTML files so I could help you. Plunker allows to generate a project with multiple files.

from jplist-es6.

I think that maybe overkill i just want a button for the input field to work. I have created a input button and it goes to the page but it wont filter anything when it goes to filterpage.php.

This is my code from subpage (test.php)

<input data-jplist-control="textbox-filter" data-group="group1" data-name="title-filter" data-path="title" type="text" value="" placeholder="Filter by Title" data-id="example.com/filterpage.php/page#group=group1&title=">

<input type="button" value="" data-group="group1" onclick="location.href='example.com/filterpage.php/page#group=group1&title=';"/>

I want to be able to search any keyword btw and also when i press "enter"

from jplist-es6.

title= should contain the value of the input field, for example input=test.
Unfortunately I can't help you more than that without proper test case in plunker or other site like this.

from jplist-es6.

https://plnkr.co/UbjfNf3IYwznlufZPnn4

from jplist-es6.

You my friend are a genius!! That worked like a charm. If you ever come to Sweden i will buy you a round of drinks :) /Thank you so much for the help.

from jplist-es6.

Is it possible to also trigger the function with hitting the key "Enter" ?

from jplist-es6.

Ok i think i got it

<script>
	var input = document.getElementById("tb");
input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("btn").click();
  }
}); 	
  		var btn = document.getElementById('btn');
  		var tb = document.getElementById('tb');

	btn.addEventListener('click', function(){
  		  location.href='<?php echo $pages->get('/availableservices/')->url;?>#group=group1&title=' + tb.value;
  		}, false);
</script>

Do you think its ok?

from jplist-es6.

You are welcome 👍
You are right, there are also examples on stack overflow: https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript

from jplist-es6.

Another question about the text-filter: in previous version i could type a value of 1 caracter/letter and it would filter now you have to type 2 letters?

from jplist-es6.

The text filter hasn't change, 1 character is enough. Please check exmaples https://www.jplist.org/examples/cars

from jplist-es6.

I'm closing this issue as it has too much stuff that is not related to autocomplete. The new autocomplete issue is here: #20

from jplist-es6.