Clear select element with Javascript

Question

I have this select field:

<div class="control-group">
  <select runat="server" onclick="ClearOptions(this);" name="txtpesquisa" id="txtpesquisa" class="form-control.selectize-control">
  </select>
  <script>
    $('#txtpesquisa').selectize();
  </script>
</div>

I need to clean it by clicking, where it opens the search, because it is written search here, then at the time you clicked, I needed the field to be ready to be typed. How can I do it? I’ve tried some ways, but without success. This is the last way I tried, but it didn’t work either:

function ClearOptions(id) {
  document.getElementById(id).options.length = -1;
}

Follows how I load txtpesquisa.

private void CarregaPessoa() {

  SqlCommand comando = new SqlCommand();
  comando.Connection = clsdb.AbreBanco();
  comando.CommandType = CommandType.Text;
  comando.CommandText = "select id, nome, classificacao_id from PESSOA where id != 0 order by nome asc";

  SqlDataAdapter da = new SqlDataAdapter();
  da.SelectCommand = comando;
  DataSet ds = new DataSet();
  da.Fill(ds);

  DataRow dr = ds.Tables[0].NewRow();
  dr[0] = 0;
  dr[1] = "Pesquise aqui .. ";
  ds.Tables[0].Rows.InsertAt(dr, 0);

  txtpesquisa.DataSource = ds.Tables[0];
  txtpesquisa.DataTextField = "nome";
  txtpesquisa.DataValueField = "id";
  txtpesquisa.DataBind();
}

Answer 1

When you use the Selectize.js he hides his input and creates a number of elements (Divs and another input) to create the inbox for tags and options. This means that it is not advisable for you to work directly with input original, but rather with the object that is returned through the method selectize().

For you to listen when the object takes focus and clear it, use as below:

var $select = $('#txtpesquisa').selectize({
    onFocus : function(){
        $select[0].selectize.clear();
    },
});

However, I think you can use it in a better way. What you are looking for may be a placeholder smarter. See below:

var $select = $('#txtpesquisa').selectize({
    placeholder : "Pesquise aqui"
});

At this link you can find more information on how to use Selectize.js and you can see the rest of your settings.