Jquery 在 Ajax 的选项顶部选择添加 "Clear All" link

Question

我正在使用 Jquery 的 Selectize 标记库，到目前为止它对我来说效果很好。

下面是我用过的代码。

Javascript代码：

$('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',                 
    create: true,    
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    onChange: function(value) {
      $(".selectize-input input[placeholder]").attr("style", "width: 100%;");
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url:  base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                console.log(res.properties);
                callback(res.properties);
            }
        });
    }
});

PHP代码：

/* API for autocomplete list of properties */
Route::post('/search-property-autocomplete', function () {
    if (!empty(trim($_POST['q']))) {
        $search_term = trim($_POST['q']);


        // getting Suburb State and Postcode of the properties based on search 
        $query = Property::join('technobrave_suburbs_', function($join) {

                    $join->on('technobrave_properties_.suburb_id', '=', 'technobrave_suburbs_.id');
                });

        $query->join('technobrave_states_', function($join) {
            $join->on('technobrave_properties_.state_id', '=', 'technobrave_states_.id');
        });


        $query->select('technobrave_properties_.*', 'technobrave_suburbs_.suburb', 'technobrave_states_.state_name');

        $query->where(function($query) use ($search_term) {
            $query->where('technobrave_properties_.post_code', 'LIKE', '%' . $search_term . '%');
            $query->orwhere('technobrave_suburbs_.suburb', 'LIKE', '%' . $search_term . '%');
            $query->orwhere('technobrave_states_.state_name', 'LIKE', '%' . $search_term . '%');
        });
        $data = $query->take(8)->get(); // getting maximum 8 records only 

        if ($data) {
            foreach ($data as $current_record) {
                $result[] = array(
                    'address' => $current_record->suburb . ' ' . $current_record->state_name . ' ' . $current_record->post_code
                );
            }
        }
    } else {
        $result = [];
    }
    echo json_encode(array('properties' => $result));
});

正如您在上面的代码中看到的，我正在使用 Ajax 来填充数据并通过调用我的 php 函数来获取记录，该函数工作得非常好。

现在，我想在所有结果的顶部附加一个项目作为 hyperlink，例如 Clear All，每次我搜索时都会出现或输入我的输入框。

如果我点击全部清除 link，下面附加的结果应该被清除。

为了使用 Selectize 提供的 clearoptions() 事件，我在我的 JavaScript 代码中更新了我的 create: ：

create: function(input, callback) {

    $.ajax({
        url:  base_url + '/search-property-autocomplete',
        type: 'POST',
        dataType: 'json',
        data: {
            q: query,

        },
        error: function() {
            callback();
        },
        success: function(res) {

            return callback({ address: "<a href='javascript:void(0)'>Clear All</a>" });

        }
    });


},

但它似乎不起作用，因为我在那里看不到我添加的选项。结果填充后，我无法看到我的 Hyperlink。

我已经知道使用类似下面的代码会在我搜索后删除我填充的记录。

$('.my-hyperlink-custom-class').on('click', function() {
    control.clearOptions();
});

但是我无法使用 Ajax.

填充的结果将这个新项目附加或推送到我的代码中

有人可以指导我如何实现这一目标。

Answer 1

这是我写的脚本。这将使用 javascript:; 更改所选属性上方的所有 href 属性，而下方的属性将保留 same.You 可以根据您的需要进行修改。

$(".row").click(function(){
var present =  $(this).index();
console.log("present"+present)
 $(this).closest('.container').find('.row').each(function(index,element){
  console.log("eachindex"+$(this).index());
  if($(this).index()>=present) {
   
  }
  else {
   $(this).attr("href","javascript:;");
  }
 })
 $(".row").each(function(){
  $("#finalAttribute").append($(this).attr("href"));
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="row row1" href="#1">
  R1
  </a>
  <br/>
    <a class="row row2" href="#2">
  R1
  </a>
    <br/>
    <a class="row row3" href="#3">
  R2
  </a>
    <br/>
    <a class="row row4" href="#4">
  R3
  </a>
    <br/>
          <a class="row row5" href="#5">
  R4
  </a>
    <br/>
</div>
<div id="finalAttribute">


</div>

Answer 2

请原谅，我没有使用 Selectize 的经验，但我浏览了他们的 examples 并注意到一些可能有用的东西：

$('#input-tags3').selectize({
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

在这个例子中，create: 的函数原型 function(input) 只有一个参数，没有回调函数。您的代码使用以下原型：create: function(input, callback)。从 Selectize 示例中，我只看到 load: 使用 function(input, callback).

我建议将您的 create: 更改为以下内容：

create: function(input) {
    // append "clear all" anchor to top of search div
    $("#searchDiv").append('<a href="#" class="clearAll">Clear All</a>')

    // perform autocomplete AJAX
    $.ajax({
        url:  base_url + '/search-property-autocomplete',
        type: 'POST',
        dataType: 'json',
        data: {
            q: query,

        },
        error: function() {
            // add text
            return input;
        },
        success: function(res) {
            // TODO: do something to display the autocomplete results
            // e.g. create a dropdown with autcomplete suggestions
            // TODO: handle user selecting one of the suggestions

            // add text
            return input;
        }
    });


},

并填写必要的 TODO 以获得您想要的功能。

HTH

Answer 3

您可以通过稍微不同的方式来实现您想要实现的目标。使用 create 回调将创建不在初始选项列表中的新项目，当您 select add ... option显示在顶部。这不是你想要的。

试一试：

var $select = $('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',                 
    create: false,
    score: function() { return function() { return 1; }; },
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    onChange: function(value) {

      if(value == 'Clear All') {
          var control = $select[0].selectize;
          control.clearOptions();
      }
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                // add the clear All option  on top.
                res.properties.unshift({address: "Clear All" });
                callback(res.properties);
            }
        });
    }
});

这会添加一个额外的选项，并在 selected 时使用 onChange 事件清除选项。

还要注意 score 选项，以便禁用默认过滤。

Answer 4

你能试试这个方法吗，我相信你的问题是 DOM 渲染和绑定 JS 函数。由于该元素在加载时不可用，因此该元素无法与 javascript 绑定。以下方法将起作用。

$('body').on('click', '.my-hyperlink-custom-class', function() {
    control.clearOptions();
});

这里我已经将函数绑定到 body，但是我再次检查目标元素是否是 .my-hyperlink-custom-class。

Answer 5

非常感谢大家的帮助和支持。特别感谢的提示以实现此功能。

这是我最终想出的解决方案。

$('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',                 
    create: true,    
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    onChange: function(value) {
      $(".selectize-input input[placeholder]").attr("style", "width: 100%;");
    },
    load: function(query, callback) {
        if (!query.length) return callback();

        // Appending only if not exists 
        if($('.clearAllSuggestions').length == 0) {
            $(".selectize-dropdown").append('<a href="#" class="clearAllSuggestions">Clear All</a>');
        }
        $.ajax({
            url:  base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                console.log(res.properties);
                callback(res.properties);
            }
        });
    }
});


$('body').on('click', '.clearAllSuggestions', function() {

    var $select = $('#q').selectize({});
    var control = $select[0].selectize;
    control.clearCache('option');
    control.clearOptions();
    control.refreshOptions(true);
});

我稍微修改了我的代码，并在我的 load 事件中添加了下面的代码，以便在我的建议标签选项中附加 "Clear All" 锚标签。

// Appending only if not exists 
        if($('.clearAllSuggestions').length == 0) {
            $(".selectize-dropdown").append('<a href="#" class="clearAllSuggestions">Clear All</a>');
        }

然后，我只是想清除缓存和选项，因此我将代码放在下面。

$('body').on('click', '.clearAllSuggestions', function() {

    var $select = $('#q').selectize({});
    var control = $select[0].selectize;
    control.clearCache('option');
    control.clearOptions();
    control.refreshOptions(true);
});

希望对您有所帮助。

Jquery 在 Ajax 的选项顶部选择添加 "Clear All" link

Jquery Selectize Add "Clear All" link at the top of options from Ajax

javascript

php

jquery

ajax

selectize.js