Làm thế nào để có được id khi một giá trị được chọn trong fcbkcomplete? - jsfiddle đã thêm

Question

Vui lòng xem qua phần dưới đây. Tôi đang cố gắng lấy id của các sản phẩm được chọn trong hộp fcbkcomplete và hiển thị nó dưới dạng giá trị được phân tách bằng dấu phẩy trong hộp văn bản với id="interest". Tôi đã viết một hàm để đạt được điều đó nhưng nó không hoạt động. Hàm này thêm id của giá trị đầu tiên và không dùng các id của các giá trị khác được thêm vào trong hộp chọn nhiều.

http://jsfiddle.net/balac/xDtrZ/1/

Tôi đã thêm json.txt. nó chứa dữ liệu như thế này

[{"key":"2", "value":"Canon Powershot "},{"key":"3", "value":"Fastrack Bag"},{"key":"4", "value":"Iphone 4 "},{"key":"5", "value":"Levis Jeans"},{"key":"7", "value":"Indig"},{"key":"8", "value":"Dashing Cars"},{"key":"9", "value":"dsdas"},{"key":"10", "value":"fsfs"}] 

Trong khóa giá trị json ở trên là id mà tôi muốn hiển thị trong hộp văn bản dưới dạng giá trị được phân tách bằng dấu phẩy. giá trị là giá trị sẽ đến trong menu thả xuống để chọn.

trong khi chọn giá trị trong trình đơn thả xuống, tôi muốn khóa tương ứng được thêm vào hộp văn bản dưới dạng giá trị được phân cách bằng dấu phẩy.

Vấn đề là chỉ có khóa của mục được chọn đầu tiên sẽ được thêm vào hộp văn bản, không sao cả.

Hy vọng cụ thể và đã nói chi tiết một cách chi tiết. nếu bất cứ ai muốn làm rõ xin vui lòng yêu cầu tôi tôi sẽ giải thích thêm.

Answer 1

Tôi nghĩ rằng tôi đã tìm thấy giải pháp đơn giản hơn cho bạn. Hãy ghi nhớ, do những vấn đề tôi đã đề cập trong ý kiến ​​của tôi, tôi đã phải đơn giản hóa đáng kể đang fcbkcomplete của bạn để làm cho nó làm việc ..

$(document).ready(function() { 
    $("#select3").fcbkcomplete({ 
     addontab: true, 
     maxitems: 10, 
     input_min_size: 0, 
     height: 10, 
     select_all_text: "select", 
     onselect: clicker 
    }); 
}); 

var clicker = function() { 
    var selected = new Array(); 

    $('option', this).each(function() { 
     selected.push($(this).val()); 
    }); 

    $('#interest').val(selected.join(', ')); 
}; 

See it in action here.

Lưu ý: tôi phải tự thêm <option>'s để danh sách select để nhận được fcbkcomplete để thực sự hoạt động đúng. Nhưng tuy nhiên, logic của tôi sẽ làm việc cho bạn bất kể.

Ngoài ra, fcbkcomplete dường như tự động thay đổi mã số <option>'s thành cái gì đó như opt_vaQDzJU37ArScs818rc8HUwz9gm1wypP vì vậy tôi đã phải sử dụng giá trị thay thế. Có giải pháp cho rằng nếu bạn đã chết đặt trên bằng cách sử dụng id thay vì giá trị.

Để minh họa cho quan điểm của tôi, sửa đổi vòng lặp qua từng lựa chọn như thế này:

$('option', this).each(function() { 
    for (var i = 0; i < this.attributes.length; i++) { 
     var pair = this.attributes[i].name + ': ' 
      + this.attributes[i].value; 
     alert(pair); 
    } 
    selected.push($(this).val()); 
}); 

Bạn sẽ thấy như thế nào các thuộc tính kết thúc sau khi fcbkcomplete chạy.

cuối cùng Sửa

Sau khi cài đặt nó lên trên localhost và sử dụng một tệp JSON txt, tôi đã có thể cuối cùng đã tái tạo vấn đề bạn đang gặp phải. Vấn đề là, hành vi hoàn toàn thay đổi khi bạn sử dụng JSON thay vì mã hóa cứng <option> s. Đây là giải pháp làm việc của bạn:

$(document).ready(function() { 
    var clicker = function(e) { 
     var selected = new Array(); 

     // using "this" here was out of context, use #select3 
     $('option', $('#select3')).each(function() { 
      selected.push(this.value); 
     }); 

     $('#interest').val(selected.join(', ')); 
    }; 

    $("#select3").fcbkcomplete({ 
     json_url: "parseJSON.txt", 
     addontab: true, 
     maxitems: 10, 
     input_min_size: 0, 
     height: 10, 
     select_all_text: "select", 
     onselect: clicker 
    }); 
}); 

Answer 2

Dưới đây là ví dụ về liên kết nhận được giá trị trong fcbkcomplete trên chọn. Cùng một quá trình bạn có thể làm cho id. https://github.com/emposha/FCBKcomplete/issues/110 dụ làm thế nào để sử dụng:

 
`//auto complete jquery starts here 
    $("#box").fcbkcomplete({ 
        width: 250, 
        addontab: true,     
        maxitems: 1, 
        input_min_size: 0, 
        height: 10, 
        cache: true, 
        filter_case: true, 
        filter_hide: true, 
        filter_selected: true, 
        newel: true, 
        filter_case:false, 
        onselect: function(item) 
        { 
         getting_value_dealer(item._value, item._id); 
        } 
       }); 
    //auto complete jquery ends here 
`