jquery mobile search option

问题

<!DOCTYPE html>
<html>
<head>
<title>colls</title>
<link rel="stylesheet" href="./jq/jquery.mobile-1.4.0.css" />
<script src="jquery.js"></script>
<script src="./jq/jquery.mobile-1.4.0.js"></script>
<script src="pay.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

</head>
<body>
<header data-role="header"  data-theme="b">

<h1>liste 1</h1>
</header>
<div  data-role="content" data-theme="b">
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search"  placeholder="votre pays" >
</form>
<div  data-filter="true" data-input="#filterBasic-input"data-theme="b"datainset="true">


<div data-role="collapsible">

<h2><span>alsace</span> <a class="gene02 ui-btn-right"data-role="button"
data-inline="true" data-mini="true" data-icon="search">generique</a></h2>
<p>code:3300</p>
<p class="pays">france</p>

and this is my script

$(document).ready(function() {
$(".gene02").click(function() {    
var $hui= $(this).closest('div').find('.pays').html();  
$("#filterBasic-input").val($hui).submit();
});

});

when i click on .gene02 it submit the result and filter it but the value of the imput is blank and the clear button didn't appear. any help please.

when i remove .submit from my script the value change but it is not filtered. thx for help

回答1:

First of all, dont use .ready() in jQuery Mobile, use pagecreate instead.

Secondly, you need to trigger filterable manually on the div which contains filterable data.

HTML

<div id="filter" data-filter="true" data-input="#filterBasic-input" data-theme="b" datainset="true" >

$(document).on("pagecreate", function () {
  $(".gene02").on("click", function () {
    var $hui = $(this).closest('div').find('.pays').html();
    $("#filterBasic-input").val($hui);
    $("#filter").filterable("refresh"); /* this */
  });
});

Demo

来源：https://stackoverflow.com/questions/20971913/jquery-mobile-search-option

标签

jquery

jquery-mobile