Employ fixed values in select2 before conducting an ajax search

Question

Employ fixed values in select2 before conducting an ajax search

I am using the select2 4.0.2 plugin to implement a select box that performs an AJAX search. However, I would like the options to display within <option> tags initially, similar to a regular <select>, until the user starts typing. At that point, I want the system to send an AJAX request to the server for further searching when the query string is not empty.

The main issue here is that the AJAX search process is somewhat slow, but I can preload the initial result on page load. Instead of loading them as <option>s, I could alternatively store them in a JSON array or another format.

javascript ajax jquery-select2

Answer 1

Answer №1

This is how I handled the situation. Within the select2 ajax options, I first store the value and text from the options in the data function since they are not directly accessible in the transport function. Below is the CoffeeScript code for this:

data: (params) ->
  ret.q = params.term
  ret.page = params.page
  o = ({
    id: $(e).val(),
    display_name: $(e).text()
  } for e, index in this.children() when index > 0)
  ret.options = o
  return JSON.stringify(ret)

Next, I define a transport function that determines whether to initiate an ajax call or utilize local data:

transport: (params, success, failure) ->
   # Obtain query string
   params_data = $.parseJSON(params.data)
   q = params_data.q
   if !q || q.length < 3
     q_reg = new RegExp(q, "i")
     data =
       incomplete_results: false
       items: params_data.options.filter (element) ->
         q_reg.test(element.display_name)
     success(data)
   else
     $.ajax(params).done(success).fail(failure)

Answer 2

This is how I handled the situation. Within the select2 ajax options, I first store the value and text from the options in the data function since they are not directly accessible in the transport function. Below is the CoffeeScript code for this:

data: (params) ->
  ret.q = params.term
  ret.page = params.page
  o = ({
    id: $(e).val(),
    display_name: $(e).text()
  } for e, index in this.children() when index > 0)
  ret.options = o
  return JSON.stringify(ret)

Next, I define a transport function that determines whether to initiate an ajax call or utilize local data:

transport: (params, success, failure) ->
   # Obtain query string
   params_data = $.parseJSON(params.data)
   q = params_data.q
   if !q || q.length < 3
     q_reg = new RegExp(q, "i")
     data =
       incomplete_results: false
       items: params_data.options.filter (element) ->
         q_reg.test(element.display_name)
     success(data)
   else
     $.ajax(params).done(success).fail(failure)

Employ fixed values in select2 before conducting an ajax search

Answer №1

Similar questions

Is there anyone out there who has successfully switched from Struts 1 to a different web framework?

Ways to display certain JSON elements

Tips for maintaining the position of a camera in three.js while also keeping its rotation fixed on the origin

Modify Bootstrap Card Styling Using JavaScript

Having trouble getting the focus-within CSS pseudo-class to work with an HTML label

Tips for resolving an error in PHP and MYSQL code where data is being selected from the incorrect table in the database

HTML Button to Populate Text in Textarea Box

Efficiently condense a sequence of ones and zeros into a more compact format, then effortlessly revert it back to the original sequence without any changes. Each time

Thinking of hosting an event centered around Google Maps?

Converting a string to a number is not functioning as expected

What is the best way to refine the results from an AJAX request in Datatables?

Creating a personalized script in ReactJS: A step-by-step guide

Utilizing ag-grid in React to render boolean values as text instead of checkboxes

Transform object into an array by flattening it

Angular 4 and Webpack: Compilation Error

The specified type 'ReturnType' mandates one type argument. Error code: ts(2314)

Leaflet Draw determines whether a polygon encompasses another polygon

Displaying MySQL Data from a Database Based on Date Selection in PHP Utilizing Ajax

Displaying Image from Jquery Ajax Response

Showing the Ajax response on an HTML webpage