jQuery UI Widgets Forums Lists ComboBox The 'val' method doesn't work when using anything in Array.prototype

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 7 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • tmcneill
    Participant

    I’ve set up a combo box that filters as you type.

    Code for the widget’s ‘search’ property looks like this:

    
    var sources = [...] // array of items defined earlier. Each item has a 'value' and a 'label' property
    var fieldWidget = $('<div>');
    
    var widgetSettings = {
      valueMember: 'value',
      displayMember: 'label',
      minLength: 0,
      remoteAutoCompleteDelay: 1,
      remoteAutoComplete: true,
      search: function(query){
        // Filter the source by the query.
        var filteredSource = [];
        for (var i in source){
          if (source[i].label.toLowerCase().indexOf(query.toLowerCase()) !== -1){
            filteredSource.push(source[i]);
          }
        }
    
        // Get the search text to preserve, since it will be wiped out when updating the source.
        var searchString = fieldWidget.jqxComboBox('searchString');
    
        // Update the source.
        fieldWidget.jqxComboBox('source', filteredSource);
    
        // Restore the search text.
        fieldWidget.jqxComboBox('val', searchString);
      },
      // ... other settings not relevant to this example are here
    

    There are 2 issues.

    1) The first is that when updating the source (via .jqxComboBox(‘source’, newSource)), the search text is removed. That’s accounted for in this code because I store the search text in a variable, update the source, then restore the search text after. This allows the source to be filtered as the user types. So I’ve got a workaround in place for this.

    2) The second issue is one I just stumbled across. I was typing “something” in to the field to test an unrelated feature. After typing the first 4 letters (“some”), the search text was erased. Any other text I tried typing seemed to behave normally. But the word “some” seemed to be odd. I found that the problem was with the call to .jqxComboBox(‘val’, searchString). It would normally work, but when searchString was equal to “some” (or ” some” or “some ” – leading and trailing whitespace was ignored), setting ‘val’ wouldn’t work. I believe this is due to a bug in the Combo Box library (and possibly others).

    Thinking the word, some, was probably not the only one that triggered this odd behavior, I wrote a script to test it.

    
    (function(){
      var widget = $('#{combo_box_widget_id}');
      var input = widget.find('.jqx-combobox-input');
    
      var dictionary = getDictionary();
    
      var broken_words = [];
    
      for (var i=0; i < dictionary.length; i++){
        var word = dictionary[i];
        input.val(word);
        widget.jqxComboBox('val', word);
        if (input.val() != word){
          broken_words.push(word);
        }
      }
    
      console.log('broken words: ', broken_words);
    
      function getDictionary(){
        return [...]; // I found an English dictionary file (~152k words) online and formatted it to work in a javascript array.
      }
    })();
    

    The results were: constructor, entries, every, fill, filter, find, includes, join, keys, length, map, pop, push, reduce, reverse, shift, slice, some, sort, splice

    The pattern seems a lot more clear. It’s a list of properties on Array.prototype. (For reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype)

    So it’s apparent that inside the call the ‘val’ method of jqxComboBox, there’s something wonky going on when dealing with an array. For now, as a workaround, I’ll just skip running the search if the search text matches a property on Array.prototype. But it would be nice if this were fixed.


    Hristo
    Participant

    Hello tmcneill,

    It is normal to happen when you change the source.
    You could try to use the DataAdapter – source.localdata = data2; adapter.dataBind();.
    Also, I would like to suggest you try beforeLoadComplete callback of the DataAdapter and to filter the records there.

    Thank you for this feedback (“some”).

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    tmcneill
    Participant

    Regardless of how the search filtering is done, the main point of making this post is to point out the bug with the ‘val’ method of jqxComboBox. You did not acknowledge this bug at all in your reply. Specifically, when calling .jqxComboBox(‘val’, str) where str is a property of Array.prototype, no value is set.

    So while it’s possible that using a data adapter would obviate the need to use the ‘val’ method, as I mentioned, I’ve already found a workaround for this bug for now. I’m not asking for a workaround. I’m asking for the bug to be fixed so the ‘val’ method functions correctly.


    Hristo
    Participant

    Hello tmcneill,

    Thank you for all your assistance and for this feedback.
    We really appreciate your help in resolving the issue.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.