jQuery select dropdown value escaping character

Question

<select id=SomeDropdown>
  <option value="0">Nothing Here</option>
  <option value="1">- Requirement Analysis</option>
  <option value="2">- - Training & Self Learning</option>
  <option value="3">- - - Bug Fixing</option>
<select>

Notice that the option value/text may contains some characters:

single quotes(')
hyphen (-) /double hyphens (- -)

When keyboard is used to select Bug fixing it selects none but works using -.

What is the correct way to escape characters (in my case hyphens) and allow user to select values from dropdown usign keyboard ?

What do you mean by `when a user seaches 'bug fixing'`? If you're letting users do a plain text search, please add your full code to the question. It sounds like you should use `:contains`, not escape characters — Rory McCrossan, Mar 24 '15 at 08:10
@Slimshadddyyy That typo wasn't the issue. We need to see the code you've written in order to help. — Rory McCrossan, Mar 24 '15 at 09:13
@RoryMcCrossan, its just a stnadard select. But the `hyphens(-)` are dynamically appended while building the select menu. user can not select any value using keyboard. — Slimshadddyyy, Mar 24 '15 at 09:17
You need to include your code that changes the select. This static HTML works fine, so something about your code to insert values may be the culprit. — Surreal Dreams, Mar 24 '15 at 13:13

score 0 · Answer 1 · edited May 23 '17 at 12:28

Without using a plugin this can be tricky. I ended up using a timeout fired on keyup and reset on keydown (ref Run javascript function when user finishes typing instead of on key up?)

The logic is that the timeout handle the writing process, when stop, using jQuery search for the first option element that starts with the chars wrote and set it as selected.

Code:

//setup before functions
var typingTimer;               //timer identifier
var doneTypingInterval = 500;  //time in ms, 5 second for example
var keyText='';

//on keyup, start the countdown
$('#SomeDropdown').keyup(function(e){
    clearTimeout(typingTimer);
    keyText+=String.fromCharCode(e.which);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#SomeDropdown').keydown(function(e){
    clearTimeout(typingTimer);    
});

//user is "finished typing," do something
function doneTyping () {

    console.log(keyText)
    $("#SomeDropdown option").filter(function() {
        return this.text.replace(/(\-\s)/gi, '').toUpperCase().lastIndexOf(keyText, 0) === 0; 
    }).attr('selected', true);

    keyText='';
}

Known issues:

back space open the select option and break the logic
when opened the select, custom typing is not recognized, it use the built in one

Demo: http://jsfiddle.net/th6oxfaq/

jQuery select dropdown value escaping character

1 Answers1