Question 36193 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

On focus edit input – Jquery

I have a select in my section using selectize js , now I want when input is focused to be able to edit the input after selection of any option.

Live demo: live demo

HTML

  <label>Single selection
    <select id="box">
    </select>
  </label>

Here is my js

$(function() {

    $('#box').selectize({
                     plugins: ["remove_button"],
                     valueField: 'title',
                     labelField: 'title',
                     searchField: 'title',
                     options: [
                         {id: 1, title: 'DIY', url: 'https://diy.org'},
                         {id: 2, title: 'Google', url: 'http://google.com'},
                         {id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
                     ],
                     render: {
                         option: function(data, escape) {
                             return '<div class="option">' +
                                     '<span class="title">' + escape(data.title) + '</span>' +
                                     '<span class="url">' + escape(data.url) + '</span>' +
                                 '</div>';
                         },
                         
                     },
    });

   //edit input on focus
   $('#box-selectized'). focus(function(){
     console.log('focused');
     $('.select-input').removeClass('full has-items');
     $('#box-selectized').css({'width': 'auto', 'opacity': 1})
     $('#box-selectized').attr('placeholder', 'How are you?');
     $('.selectize-input').addClass('not-full dropdown-active input-active');
     $('.item').css({'visibility' : 'hidden'})
   })

});

Problem:

enter image description here

When the input is focused I am not able to type anything in my input, what is wrong here?

Tags:

2

Answers


  1. 0

    The issue is that this is a select type input which doesn’t expect the user to be able to type in text. I would suggest using a text type input with a <datalist>. Ex:

    <label>Single selection:
<input list="yourlist" type="text"/></label>
<datalist id="yourlist">
  <option value="DIY">
  <option value="Google">
  <option value="Yahoo">
</datalist>
    Login or Signup to reply.
  2. 0

    What you wanna do with this code ?

        $('#box-selectized'). focus(function(){
     console.log('focused');
     $('.select-input').removeClass('full has-items');
     $('#box-selectized').css({'width': 'auto', 'opacity': 1})
     $('#box-selectized').attr('placeholder', 'How are you?');
     $('.selectize-input').addClass('not-full dropdown-active input-active');
     $('.item').css({'visibility' : 'hidden'})
   })

    you remove class and hide item, but item still selected it’s just hidden, so please explain what’s your objective ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search