tomickigrzegorz / autocomplete Goto Github PK

Great autocomplete by the way and docs, covers almost all the bases including accessibility!

On search I would like it to say 'Searching...' so two things would need to be in place for that: Currently searching and dropdown visible.

Example:

<li class="search-results-title" role="option" tabindex="-1" aria-selected="false" aria-setsize="11" aria-posinset="0">
     <span>Searching...</span>
</li>

<li class="search-results-title" role="option" tabindex="-1" aria-selected="false" aria-setsize="11" aria-posinset="0">
     <span>Found 10 results</span>
</li>

Thanks!

Grzegorz,

Wow! I am so impressed with your work, and I have learned a great deal working through your code.

I thought I should mention a relatively minor point:
At https://tomickigrzegorz.github.io/autocomplete/#data-elements
in your code for 'Static file + data-elements" doc/index.html, it would be helpful if you included the next line:
<div class="info-d"></div>
I should have quickly realized that this was needed, but, being relatively new to modern javascript, it did cause me some confusion.

Thanks again for your wonderful work.

Bob

With a single list item return, it is possible for the up and down arrows to deselect the list item, which throws an error onSubmit (tested with static file, and leaflet/osm) note: leaflet test done using world's longest city name: Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu

It would be nice to add a new parameter that allows you to automatically select the first item in the list.

It would be great if the autocomplete plugin had a compiled, but unminified js file as well if you include this in you handle minifying yourself e.g. in gulp or using a .NET bundle/minifying library.

Showing the clear button (clearButton) only when some data is in the input field

• changed ara-label clear text from input to Clear the search query.
• adding title to a clear button such as area-label

When selectFirst is off the search works ok, the first element is not selected, but if we click the input field again the first element is selected.

The error occurs if, and only then, we have a search result. We move to, say, the fourth record of the result. It is marked in gray, now in the input field without closing the results, we delete the backspace data and do a new search - of course, there must be more results than before. We start to move the cursor down or up. And then it starts with the last gray marked place. Not from 0 or 1 item in the list.

PS. I also found one less important bug, namely noResults showing in the example with checkboxes - there should be a template variable

noResults callback not working from ajax loaded page

It would be nice if scrolling with arrows would add data to the input field. It is best to use some parameter to control this behavior.

• scrollIntoView set default to true
• consider removing aria-describedby from the library and adding it to html manually (library size will decrease)?
• delay set default to 0

Is it possible to connect with livehelperchat (https://github.com/LiveHelperChat/livehelperchat ) chat widget for auto completion of questions ??

2)Widget is loaded as iframe and target div is given below

It would be nice if the result could appear above the input field, the input field, then where this field is too close to the bottom edge of the page.

It seems this part need to reset margin as well: https://github.com/tomik23/autocomplete/blob/master/sources/scss/modules/_autocomplete.scss#L30-L34

Depending on framework etc. there is typical a left margin and in that case it looks like this:

Hi!

I don't know where I can post this issue, so I do it here.

When I do a search with the term autocomplete on the main page of jsDelivr I find a react component (react-circular-progress-bar) but not this library. I should say that I gave up after the 5. page, I've thought that if it's there it should be listed earlier.
If I search tomik I just get the react library.
If I click on the Author, only one library is reported.

Maybe there're some configs missing, I have no idea. Anyway, I think it's not the supposed behaviour.

Thanks for your work.

ciao

There's a typo in clear label here: https://github.com/tomik23/autocomplete/blob/master/sources/js/script.js#L659

It should be clear not claar.

Regardless of how we set 'clearButton: true/false', this button always appears.

aria-autocomplete is needed

There is no appropriate style "pointer-events: none;"

The 'x' button is not hidden when loading data. The 'x' button and the loading animation appear at the same time.

If the first time the no-results item appears, you will not be able to click on it and in the window to close this information.

The problem only occurs when we want to show all the results after clicking on the input field, and exactly when something is already selected or when there are no results.

Click on the input field for the first time. The results appear all and everything is fine. Then select a field by clicking on it. The data is saved in the input field.
Now I click on the input field again. And it is at this stage that this problem occurs. Because instead of displaying only one record, all data appears for a fraction of a second and then only this one record appears.

The error occurs when we have:

• cursor over the results
• results have a scroll bar

How to see this error:
We move the cursor over the results, the element is selected. Press the keyboard arrow down. When we start scrolling and we cross the visible area, scrolling the window will not activate the next visible element, but the element that is under the mouse cursor is selected.

Discussed in #119

       case keyCodes.TAB:
       case keyCodes.ESC:
       this.reset();

Would it be possible to add support for an import statement?

This expression has stopped working this.regex = /[~!@#$%^&*()_|+-=÷¿?;:'",.<>{}[]\/]/g;`

Tab movement problem. Failure to close the list if we have more than one search field.

No reset of settings including aria-label, error occurs when deleting single characters up to one character.

Discussed in #95

tried to try and always fail can you help me how to put initial value?

If the selectFirst: true parameter is set, the auto-selected class is set on the first element but aria-selected is not set to true.

The cursor is not positioned at the end of the text in the input field when moving up between records.

If there is more than one input field then there is a problem in moving between records using the up/down arrows

It would be nice to separate the styles, i.e. create a default style (minimal appearance) and a separate "theme" file that changes the appearance of the input field and ul, something like highlightjs-themes

Hi,

Thought i'd report a bug I experienced with the following example from your page:

const auto = new Autocomplete('you-id', {
  clearButton: true,
  clearButtonOnInitial: false,
  selectFirst: false,
  insertToInput: false,
  disableCloseOnSelect: false,
  cache: false,
  showAllValues: false,
  howManyCharacters: 1,
  delay: 500,
  ariaLabelClear: "clear the search query",
  classPreventClosing: "",
  classGroup: "",
  classPrefix: "auto",
  onSearch: ({ currentValue, element }) => {},
  onResults: ({ currentValue, matches, template, classGroup }) => {},
  onRender: ({ element, results }) => {},
  onSubmit: ({ index, element, object, results }) => {},
  onOpened: ({ type, element, results }) => {},
  onSelectedItem: ({ index, element, object }) => {},
  onReset: (element) => {},
  onClose: () => {},
  noResults: ({ element, currentValue, template }) => {},
});

The variable this.classPrefix has a prefix of 'auto-auto' with this configuration, so it's a very minor issue, and causes a js css selector error when you hover over an item.

see your handleMouse method:

const activeClass = this._activeList;
console.log(activeClass) // logs 'auto-auto', so the below fails...
const activeClassElement = select("." + activeClass);

It appears that the below configuration options are the issue:

classPreventClosing: "",
classGroup: "",

The error occurs when the input field is in the form and we move with arrows and click enter on the selected record.
Example:

<form action="" method="post">
  <div class="auto-search-wrapper">
    <input type="text" id="basic" placeholder="type w" />
  </div>
</form>

Solution:

case keyCodes.ENTER:
  event.preventDefault(); // this line fixing this issue
  this._getTextFromLi(this._selectedLi);
  break;

This is a great script and just what I was looking for, but I had to tweak it for working with dynamic radio buttons. The issue is - down arrow and enter keypress (macos - chrome/safari) doesn't work. Mouse click works. How to fix this behaviour. The code used below works with mouse click on selection. But enter does a get action and submits a form variable instead of the object.id.

    onSubmit: ({ index, element, object, results }) => {
      //console.log("complex: ", index, element, object, results);
      const myArray = object.text.split("|");
      element.value = myArray[0];
      window.open("/"+encodeURI(object.id),"_self");
    },


    onSelectedItem: ({ element, object }) => {
        if (!object) return;
        const myArray = object.text.split("|");
        element.value = myArray[0];
    }

Originally posted by @nikhiltalreja in #144

Remove from documentation

If we set the height of the list of results to say 300px and set overflow: auto, the possibility of scrolling will appear. Everything looks fine until you use the up/down arrows, the view does not follow the selected element.
It would be useful to have the option that enables the ability to follow the view.

For example, enter data-elements enter 'a', use the arrows to move to the last record of results. Now, with open files, delete the letter 'a' and type 'b', the records should move to the top and mark the first record, but unfortunately it doesn't.

It seems there's a syntax error at the properties here, and a tool like NUglify warns about this: https://github.com/trullock/NUglify/blob/master/src/NUglify/JavaScript/JSError.cs#L96

It seems in should be the following instead using : instead of = operator:

delay: 500,
clearButton: true,
howManyCharacters: 1,
selectFirst: false,
insertToInput: false,
showAllValues: false,
cache: false,
disableCloseOnSelect: false,

https://github.com/tomik23/autocomplete/blob/master/docs/js/autocomplete.js#L34-L54

like you have here: https://github.com/tomik23/autocomplete/blob/master/docs/js/autocomplete.js#L7-L10

"Property 'then' does not exist on type 'void | Promise'"

Hey @Tomik23

It would be super helpful to have this as an NPM package. It would be an improvement for modern local development but also to use it with tools like Skypack.

Combine the above three parameters when navigating through the results with the arrows and displayed

onSelectedItem: ({index, element, object}) => {
   console.log("onSelectedItem:", index, element, object);
},

The data from the input field (element.value) is wrongly written
For "wal" we have two results for Walter White Jr. and Walter White, the first element of the data is highlighted and then displayed repeatedly
index = 0, input = wal what we entered, object is correct
Use the cursor to go to the second record of senior White ;)
Intex = 1, input = wal (and here's an error), object is valid